创建 Canvas

 

代码如下：

 

<canvas id="canvas" width="800px" height="400px" class="canvas">您的浏览器不支持canvas!</canvas>

 

其中设置了canvas 的id ， class， 以及高宽。如果浏览器不支持canvas的话，会显示标签中包含的内容：您的浏览器不支持canvas!

 

通过 JavaScript 来绘制

 

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

 

<script type="text/javascript"> var canvas = document.getElementById('canvas'); var context=canvas.getContext("2d"); ....//实现canvas功能代码段 </script>

 

其中getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 

实现canvas鼠标画图

 

设置鼠标画图的配置参数

 

var color = "#df4b26"; var lineWidth = 5; var joinType = "round"; var capType = "round"; function draw_config(context){ //设置线条宽度 context.lineWidth = lineWidth; //设置或返回两条线相交时，所创建的拐角类型 context.lineJoin = joinType; //设置线段颜色 context.strokeStyle = color; //设置或返回线条的结束端点样式 context.lineCap = capType; }

 

当我们画直线时，一般会用到 moveTo 与 lineTo 两种方法。

 

moveTo 方法的作用是将光标移动到指定坐标点，绘制直线的时候，以这个坐标点为起点。

 

moveTo(x, y);

其中x对应坐标的横坐标，y对应坐标的纵坐标。

 

lineTo 方法在moveTo 方法中指定的直线起点与参数中指定的直线终点坐标之间绘制一条直线。

 

lineTo(x, y);

其中x对应坐标的横坐标，y对应坐标的纵坐标。

 

使用完这个 lineTo 方法后，光标自动移动到直线终点，等下次再调用 lineTo 方法时，将以当前光标坐标为直线起点，并以 lineTo 中指定的坐标为直线终点，绘制一条直线。可以不断重复这个过程，来绘制复杂的图形的路径绘制。

 

另外，我们还需要实现获取鼠标在画布上的相对坐标。

 

代码如下：

 

function getMousePos(canvas,evt){ var rect = canvas.getBoundingClientRect(); return { x:evt.clientX - rect.left, y:evt.clientY - rect.top } }

 

最后，实现画图功能。

 

我们可把画图功能划分为四个步骤:

 

1、 初始化过程。获取canvas.getContext("2d")对象，并实现鼠标 onmousedown 事件监听。

2、 响应鼠标 onmousedown 事件，开始画图，并实现鼠标 onmousemove 和 onmouseup 事件监听。

3、响应鼠标 onmousemove 事件，鼠标左键松开前，会一直重复执行。

4、响应鼠标 onmouseup 事件。

 

我们可以通过继承原型链的方式来实现。

 

代码如下：

function Draw(arg) { if (arg.nodeType) { this.canvas = arg; } else if (typeof arg == 'string') { this.canvas = document.getElementById(arg); } else { return; } this.init(); } Draw.prototype = { init: function() { var that = this; if (!this.canvas.getContext) { return; } this.context = this.canvas.getContext('2d'); this.canvas.onselectstart = function () { return false; //修复chrome下光标样式的问题 }; this.canvas.onmousedown = function(event) { that.drawBegin(event); }; }, drawBegin: function(event) { var that = this; var mousePos = getMousePos(this.canvas,event); var x = mousePos.x; var y = mousePos.y; this.context.beginPath(); draw_config(this.context); this.context.moveTo(x,y); document.onmousemove = function(event) { that.drawing(event); }; document.onmouseup = this.drawEnd; }, //画图函数，鼠标左键松开前，会一直重复执行 drawing: function(event) { var mousePos = getMousePos(this.canvas,event); var x = mousePos.x; var y = mousePos.y; this.context.lineTo(x,y); if(x>0 && y>0 && x<this.canvas.width && y<this.canvas.height){ this.context.stroke(); } }, //鼠标松开时，停止画图 drawEnd: function() { document.onmousemove = document.onmouseup = null; } }; var draw = new Draw(canvas);

 

当我们画完图之后，我们可以点击保存按钮，实现保存为图片的功能。

 

代码如下：

var savebtn = document.getElementById("savebtn"); savebtn.onclick = function(){ //将canvas画布转化成base64编码的image。图片默认为png格式。 var url = canvas.toDataURL(); var img = document.getElementById("image"); img.src = url; }

 

大致效果如图：

 

 

到此，教程基本结束。现在，可以点击链接 canvas 画图实例 ，查看其实现的效果。