HTML5 Canvas 制作一个“在线画板”

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

内容摘要

① Canvas 部分线条事件 ② JQuery 部分鼠标事件

主讲：张恩民 官网：
Network Optimization Expert Team

（第26讲） HTML5 Ca

nvas 制作一个“在线画板”

当鼠标按下时
画图坐标开始 鼠标移动画图 鼠标松开结束 鼠标移动无效

Network Optimization Expert Team

（第26讲） HTML5 Canvas 制作一个“在线画板”
Canvas 部分线条事件 var canvas = document.getElementById('php100'); var p100=canvas.getContext("2d");

p100.lineWidth=5; p100.strokeStyle=“red”; p100.moveTo(mouseX,mouseY); p100.lineTo(mouseX,mouseY); p100.stroke();

//定义线条宽度 //定义线条颜色 //起始位置 //终止位置 //结束图形

Network Optimization Expert Team

（第26讲） HTML5 Canvas 制作一个“在线画板”
JQuery 部分线条事件 $( ).mousedown $( ).mousemove $( ).mouseup //鼠标按下时 //鼠标移动时 //鼠标抬起时

$("#php100").mousedown(function(e){ var mouseX = e.pageX - this.offsetLeft; //获得区域坐标x var mouseY = e.pageY - this.offsetTop; //获得区域坐标y });
Network Optimization Expert Team

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

感谢收看本次教程
欢迎访问:

Network Optimization Expert Team



HTML5 Canvas 制作一个“在线画板”—学习资料共享网是一个在线免费学习平台、通过收集整理大量专业知识，职业资料、考试资料,考试复习指导,试题资料等给大家分享;同时提供学习互动交流;更好的帮助大家学习。

点击搜索更多“HTML5 Canvas 制作一个“在线画板””相关的内容
下载《HTML5 Canvas 制作一个“在线画板”》