内容摘要html5canvas制作一个画板php100.pptxVIP

（第26讲）HTML5Canvas制作一个“在线画板”

内容摘要

①Canvas部分线条事件

②JQuery部分鼠标事件

主讲：张恩民

官网：

（第26讲）HTML5Canvas制作一个“在线画板”

当鼠标按下时

画图坐标开始

鼠标移动画图

鼠标松开结束

鼠标移动无效

（第26讲）HTML5Canvas制作一个“在线画板”

Canvas部分线条事件

varcanvas=document.getElementById(php100);

varp100=canvas.getContext(2d);

p100.lineWidth=5;//定义线条宽度

p100.strokeStyle=“red”;//定义线条颜色

p100.moveTo(mouseX,mouseY);//起始位置

p100.lineTo(mouseX,mouseY);//终止位置

p100.stroke();//结束图形

（第26讲）HTML5Canvas制作一个“在线画板”

JQuery部分线条事件

$().mousedown//鼠标按下时

$().mousemove//鼠标移动时

$().mouseup//鼠标抬起时

$(#php100).mousedown(function(e){

varmouseX=e.pageX-this.offsetLeft;//获得区域坐标x

varmouseY=e.pageY-this.offsetTop;//获得区域坐标y

});

（第26讲）HTML5Canvas制作一个“在线画板”

感谢收看本次教程

欢迎访问: