Html5 Canvas 画板实例详解

时间：2022-06-25 18:23:56 编辑：袖梨来源：一聚教程网

代码

注意：本文的代码用了 jQuery，注意引入。

代码如下

复制代码

myCanvas.lineWidth = 5
myCanvas.strokeStyle = "blue";
myCanvas.lineCap = "round";
var paint = 0 ;
$( "#myCanvas" ).mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = 1;
myCanvas.moveTo(mouseX, mouseY);
});
$( "#myCanvas" ).mouseup(function(e){
paint = 0;
});
$( "#myCanvas" ).mousemove(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
if( paint ){
  myCanvas.lineTo(mouseX, mouseY);
  myCanvas.stroke();
}
});

解析

上边的代码，首先和之前话直线一样三个属性，之前没用过 lineCap，说的是直线首尾是什么样的，round 为圆角，为了让画的图没用那么生硬。

然后一个变量 paint 指定指针移动时是否允许画图，这个要说明下，我们要的效果是必须在鼠标按下并且指针在画布的有效区域才可以绘制，这个变量就是为了防止鼠标没有按下或者松开之后依然绘制。

mousedown() 事件，鼠标按下时，首先获得鼠标对于画布的相对坐标，然后把 paint 改成真，也就是允许绘制，并且建立起点。

mouseup() 事件，鼠标松开，把 paint 改成假，不允许继续绘制。

mousemove() 事件，鼠标移动，获取鼠标对于画布的相对坐标，然后如果 paint 为真，即允许绘制则建立一个点连线，并结束。

因为绘制的点巨多，所以就像乱七八糟的线一样~

这只是一个简单的例子，你当然可以留出几个按钮和输入框让用户自行控制线条宽度、样式以清空画布、保存绘制的图形之类的。

推荐专题

最新下载

热门教程

Html5 Canvas 画板实例详解

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程