html5笔迹画图,html5绘图工具canvas模拟笔迹绘画特效

特效描述：html5绘图工具 canvas 模拟笔迹 绘画特效。html5绘图工具使用鼠标在网页上进行写字，canvas绘画模拟笔迹特效

代码结构

1. HTML代码

sorry!

//定义获取id 元素的函数

function $(id){

return document.getElementById(id);

}

//定义了两个数组元素。用于记录鼠标的X Y 轴的位置

var clickX = new Array();

var clickY = new Array();

var act = new Array();

var canvas = $("canvas");//画布对象

var c = canvas.getContext("2d");

var print = false;

//鼠标按下触发

canvas.onmousedown = function(e){

//记录当前鼠标点

var m = window.event || e;

print = true;

addClick(m.clientX-this.offsetLeft,m.clientY-this.offsetTop,0);

}

//鼠标移动触发

canvas.onmousemove = function(e){

var m = window.event || e;

if(print){//鼠标按下来移动的话

addClick(m.clientX-this.offsetLeft,m.clientY-this.offsetTop,1);//true为新的点绘画

draw();

}

}

//鼠标松开触发

canvas.onmouseup = function(){

print = false;

}

//鼠标离开触发

canvas.onmouseleave = function(){

print = false;

}

/*

*鼠标点记录

* x 鼠标X 轴

* y 鼠标Y 轴

*/

function addClick(x,y,a){

clickX.push(x);

clickY.push(y);

act.push(a);

}

/*

*开始绘画

*/

function draw(){

c.strokeStyle = "pink";//设置填充路径的颜色

//当两条线条交汇时，创建圆形边角：

c.lineJoin = "round";

c.lineWidth = 5;

for(var i = 0,l = clickX.length;i

c.beginPath();//开始路径绘制

if(act[i]){

c.moveTo(clickX[i-1],clickY[i-1]);

}else{

c.moveTo(clickX[i]-1,clickY[i]-1);//新的点。为了不要和lineTo相等，所以减了一个像素。

}

c.lineTo(clickX[i],clickY[i]);

c.closePath();//结束路径绘制

c.stroke();//对路径进行填充

}

}