本文将引导你使用canvas和JavaScript创建一个简单的绘图程序。fDjHTML5中文学习网 - HTML5先行者学习网
首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面。fDjHTML5中文学习网 - HTML5先行者学习网XML/HTML Code复制内容到剪贴板
获取绘图环境,context对象提供了用于在画布上绘图的方法和属性fDjHTML5中文学习网 - HTML5先行者学习网XML/HTML Code复制内容到剪贴板context=document.getElementById('canvasInAPerfectWorld').getContext("2d");
开始绘图过程fDjHTML5中文学习网 - HTML5先行者学习网
首先我们需要存储绘图路径点坐标,addClick函数添加坐标点值到数组fDjHTML5中文学习网 - HTML5先行者学习网JavaScript Code复制内容到剪贴板varclickX =newArray();
varclickY =newArray();
varclickDrag =newArray();//存储路径点
varpaint;//是否绘制,mousedown时置为true
functionaddClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
redraw函数每次调用整个canvas就会重新绘制一次。首先我们清空画布上内容,设置绘制线条颜色粗细线条连接方式。然后fDjHTML5中文学习网 - HTML5先行者学习网
两点之间绘制一段路径,将数组中的坐标点依次绘制出来fDjHTML5中文学习网 - HTML5先行者学习网XML/HTML Code复制内容到剪贴板function redraw(){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // 清除画布内容
context.strokeStyle="#df4b26";//设置线条颜色
context.lineJoin="round";//当两条线条交汇时,创建圆形边角
context.lineWidth=5;//线条粗细
for(vari=0; i
context.beginPath();//开始一条路径,或重置当前的路径
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();//绘制路径
}
}
绘制过程需要的事件fDjHTML5中文学习网 - HTML5先行者学习网
1 mousedown事件fDjHTML5中文学习网 - HTML5先行者学习网
绘图这点击到画布上时,将触发该事件执行。调用了addClick函数,并将paint置为true。fDjHTML5中文学习网 - HTML5先行者学习网JavaScript Code复制内容到剪贴板$('#canvas').mousedown(function(e){
varmouseX = e.pageX -this.offsetLeft;
varmouseY = e.pageY -this.offsetTop;
paint =true;
addClick(e.pageX -this.offsetLeft, e.pageY -this.offsetTop);
redraw();
});
2 mousemove事件fDjHTML5中文学习网 - HTML5先行者学习网
mousedown中设置的paint为true后,鼠标移动时触发mousemove事件执行,将鼠标移动的所有点记录下来,并不断调用redraw重绘画布。fDjHTML5中文学习网 - HTML5先行者学习网
fDjHTML5中文学习网 - HTML5先行者学习网JavaScript Code复制内容到剪贴板$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX -this.offsetLeft, e.pageY -this.offsetTop,true);
redraw();
}
});
3 mouseup事件fDjHTML5中文学习网 - HTML5先行者学习网
mouseup鼠标点击后松开或者拖拽后松开,表示绘制完成该路径,将paint置为false。fDjHTML5中文学习网 - HTML5先行者学习网
fDjHTML5中文学习网 - HTML5先行者学习网XML/HTML Code复制内容到剪贴板$('#canvas').mouseup(function(e){
paint=false;
});
fDjHTML5中文学习网 - HTML5先行者学习网
4 mouseleave事件fDjHTML5中文学习网 - HTML5先行者学习网
mouseleave鼠标离开canvas元素,将paint置为false。fDjHTML5中文学习网 - HTML5先行者学习网XML/HTML Code复制内容到剪贴板$('#canvas').mouseleave(function(e){
paint=false;
});
以上这篇用html5的canvas和JavaScript创建一个绘图程序的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持程序员学习网。fDjHTML5中文学习网 - HTML5先行者学习网