点生线，线生面，然后生亿万种图形。
<body><div id='canvas'></div></body>
<script type='text/javascript'>
function Graphics(canvas)//coordinate
{
this.canvas = typeof(canvas)=="string"?document.getElementById(canvas):canvas;
this.color = '#000000';
this.stroke=2
this.documentRoot = document.createElement("div");
}
Graphics.prototype = {
paint : function()
{
this.canvas.appendChild(this.documentRoot);
},
clear : function()
{
if(this.documentRoot)this.documentRoot.innerHTML='';
if (this.canvas) this.canvas.innerHTML = '';
},
drawDiv : function(x, y, w, h)
{
var elem = document.createElement("div");
var style0 = elem.style,style1={'position':'absolute','overflow':'hidden','left':x,'top':y,'width':w,'height':h,'backgroundColor':this.color}
for(var p in style1){style0[p]=style1[p]}
this.documentRoot.appendChild(elem);
delete style1;
},
/*2D画线(Bresenham算法)*/
drawLine2D : function(x1, y1, x2, y2)
{
if (x1 > x2)
{
var _x2 = x2;
var _y2 = y2;
x2 = x1;
y2 = y1;
x1 = _x2;
y1 = _y2;
}
var dx = x2-x1, dy = Math.abs(y2-y1),
x = x1, y = y1,
yIncr = (y1 > y2)? -1 : 1;
var s = this.stroke;
if (dx >= dy)
{
if (dx > 0 && s-3 > 0)
{
var _s = (s*dx*Math.sqrt(1+dy*dy/(dx*dx))-dx-(s>>1)*dy) / dx;
_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
}
else var _s = s;
var ad = Math.ceil(s/2);
var pr = dy<<1,
pru = pr - (dx<<1),
p = pr-dx,
ox = x;
while ((dx--) > 0)
{
++x;
if (p > 0)
{
this.drawDiv(ox, y, x-ox+ad, _s);
y += yIncr;
p += pru;
ox = x;
}
else p += pr;
}
this.drawDiv(ox, y, x2-ox+ad+1, _s);
}else{
if (s-3 > 0)
{
var _s = (s*dy*Math.sqrt(1+dx*dx/(dy*dy))-(s>>1)*dx-dy) / dy;
_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
}
else var _s = s;
var ad = Math.round(s/2);
var pr = dx<<1,
pru = pr - (dy<<1),
p = pr-dy,
oy = y;
if (y2 <= y1)
{
++ad;
while ((dy--) > 0)
{
if (p > 0)
{
this.drawDiv(x++, y, _s, oy-y+ad);
y += yIncr;
p += pru;
oy = y;
}
else
{
y += yIncr;
p += pr;
}
}
this.drawDiv(x2, y2, _s, oy-y2+ad);
}
else
{
while ((dy--) > 0)
{
y += yIncr;
if (p > 0)
{
this.drawDiv(x++, oy, _s, y-oy+ad);
p += pru;
oy = y;
}
else p += pr;
}
this.drawDiv(x2, oy, _s, y2-oy+ad+1);
}
}
},
/*绘制箭头*/
drawArrow : function(x1, y1, x2, y2){
this.drawLine2D(x1, y1, x2, y2);
var arrow = 60; //箭头转角
var lenth = 10; //箭头宽度
var angle = 0;
if (Math.abs(x2 - x1) < 0.1 && y2 < y1)
angle = -90;
else if (Math.abs(x2 - x1) < 0.1 && y2 > y1)
angle = 90;
else if(x1 == x2)
angle = 180;
else{
angle = Math.atan(parseFloat(y1 - y2) / (x1 - x2)) * 180 / Math.PI;
}
if (x1 > x2)angle = 180 + angle;
var left = 270 - angle - arrow / 2;
var right = 270 - angle + arrow / 2;
var rx = lenth * Math.sin(right * Math.PI / 180);
var ry = lenth * Math.cos(right * Math.PI / 180);
var lx = lenth * Math.sin(left * Math.PI / 180);
var ly = lenth * Math.cos(left * Math.PI / 180);
this.drawLine2D(x1, y1, x2, y2);
this.drawLine2D(x2, y2, x2 + parseInt(lx),y2 + parseInt(ly));
this.drawLine2D(x2, y2, x2 + parseInt(rx),y2 + parseInt(ry));
}
};
var gc = new Graphics('canvas');
gc.color='#0000FF';//设置颜色
gc.paint();
var tempX=0;
var tempY=0;
function drawA(event){
var event = window.event||event;
var x = event.pageX||event.x
var y = event.pageY||event.y
if(Math.abs(x-tempX)>2||Math.abs(y-tempY)>2){
gc.clear();
//gc.drawLine2D(100,100,x,y);
gc.drawArrow(100,100,x,y);
gc.paint();
tempX=x;
tempY=y;
}
}
window.onmousemove=drawA;//FF
document.body.onmousemove=drawA;//IE
</script>
备注：这个是用纯HTMLElement绘图，效率很差。 实际应用可以用VML&SVG绘图。
分享到：
相关推荐
`jsGraphics`提供了基本的绘图功能，如线条、文本、矩形等，可以通过JavaScript来控制其属性，如颜色、位置、大小等。 #### 2. 定义`Line`类 接下来，定义了一个`Line`类，这个类封装了曲线图的绘制逻辑。在这个类...
12. **ES6新特性**：包括箭头函数、模板字符串、类和模块等，让JavaScript代码更简洁、易读。 这个压缩包的学习记录可能涵盖了以上这些概念，并且可能包含了一些实际的代码示例和问题解决方案，对于理解JavaScript...
函数是JavaScript中的重要组成部分，了解箭头函数、闭包和立即执行函数表达式（IIFE）是非常必要的。此外，掌握JavaScript的对象和数组操作，如对象属性的访问和修改、数组的遍历方法（forEach、map、filter、reduce...
例如，`<div>`标签可以用来创建一个区域来放置游戏元素，`<canvas>`标签则用于绘制动态的游戏图形。 2. CSS美化： CSS（Cascading Style Sheets）负责网页的样式和布局。在HTML小游戏里，CSS用于设置游戏界面的...
连接也可以包含箭头或标签等附加信息。 - **画布（Canvas）**：jsPlumb使用HTML5 canvas、SVG或VML作为绘图基础，根据浏览器的兼容性自动选择合适的方式。 ### 2. 初始化jsPlumb 在使用jsPlumb前，需要在HTML文档...
Canvas是一个二维绘图接口，开发者可以使用JavaScript来绘制图形，包括动画。通过动态改变Canvas上的像素，可以创建出各种动态效果，比如在这个例子中，网页内容的鼓起和切换可能就是通过Canvas来实现的。 CSS3则是...
7. **ES6及以后的新特性**：包括箭头函数、模板字符串、解构赋值、Promise、async/await等，这些新特性极大地提升了JavaScript的可读性和编程效率。 **HTML（HyperText Markup Language）** 是构建网页内容的基础，...
总之，开发贪吃蛇游戏涉及到了JavaScript的基础语法、事件处理、DOM操作、Canvas绘图或CSS布局，以及基本的游戏逻辑设计。通过这个项目，开发者不仅可以巩固编程技能，还能体验到游戏开发的乐趣。
- **图片编辑**：允许用户在截图后进行简单的编辑，如添加文字、箭头、高亮等。 - **多种导出格式**：支持JPG、PNG等多种图像格式的导出。 - **上传服务**：集成图片上传服务，让用户可以直接将截图保存到云端。 五...
- **Canvas绘图**：提供了一种动态图形绘制能力，通过JavaScript操作像素，实现游戏、图表等复杂视觉效果。 - **Web Storage**：包括localStorage和sessionStorage，提供了比Cookie更高效的数据存储方案。 - **...
- **图形表示**：mxGraph提供了一套完整的图形表示系统，包括各种形状（如框、连接线、箭头等）和样式选项，使得用户可以轻松创建美观的图表。 - **交互性**：该库支持用户对图形的实时编辑，如拖放、连接节点、...
3. 块级元素与行内元素：如`<div>`、`<p>`是块级元素，占据一整行；而`<span>`、`<a>`是行内元素，只占据自身内容的宽度。 4. HTML5新特性：包括`<canvas>`用于画布绘图，`<video>`和`<audio>`处理多媒体，以及`...
此外，jsPlumb还支持多种高级功能，如自定义连接线类型（如Bezier曲线）、连接线上的标签和箭头、连接线的事件监听（如拖动、点击等）、以及对多个实例的管理。 总的来说，“最完整的jsPlumb流程图demo”提供了一个...
Canvas是HTML5中的一种绘图技术，允许开发者通过JavaScript在网页上绘制图形。在迁徙图中，Canvas可以用来动态绘制线条，表示迁徙路径，同时可以通过动画效果来模拟流动的过程，使得视觉表现更为生动。 接下来，...
通过JavaScript，我们可以获取`<canvas>`的绘图上下文（`getContext('2d')`），进而进行像素级别的操作，实现游戏的动态效果。 为了实现游戏的互动性，HTML还需要与CSS（Cascading Style Sheets）和JavaScript协同...
// 假设我们有左箭头和右箭头按钮 $('.prev').click(function() { index--; if (index ) { index = $slides.length - 1; } slideTo(index); }); $('.next').click(function() { index++; if (index >= $...
- `<div>`：通用容器。 - **列表标签** - `<ul>`：无序列表。 - `<ol>`：有序列表。 - `<li>`：列表项。 - **表格标签** - `<table>`：表格。 - `<tr>`：表格行。 - `<td>`：单元格。 - `<th>`：表头单元格...
- Canvas的使用和绘图方法（如绘图上下文context）。 - JavaScript事件监听和处理。 - 动画循环的实现，通常是使用setTimeout或者setInterval方法。 - 碰撞检测的算法，用于判断子弹是否击中怪兽。 - 递增分数以及在...
3. 内联元素与块级元素的区别，如`<span>`与`<div>`。 4. HTML属性，如`id`和`class`，用于CSS选择器和JavaScript操作。 5. 链接到外部资源，如CSS和JavaScript文件，以及图像和字体。 6. HTML5的新特性，如`<audio>...
- ES6及更高版本的新特性：箭头函数、模板字符串、let/const、Promise、Async/Await等。 - JavaScript库和框架：jQuery、React、Vue.js、Angular等。 3. HTML（HyperText Markup Language）：HTML是构成网页的...