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

2013-8-8 21:44| 发布者: admin| 查看: 3419| 评论: 0

摘要: var canvas = document.getElementById('php100'); var p100=canvas.getContext("2d"); p100.lineWidth=5;//定义线条宽度 p100.strokeStyle=“red”;//定义线条颜色 p100.moveTo(mouseX,mouseY);//起始位置 p100.li ...

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();                        //结束图形

$( ).mousedown //鼠标按下时
$( ).mousemove //鼠标移动时
$( ).mouseup //鼠标抬起时

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

  var mouseX = e.pageX - this.offsetLeft; //获得区域坐标x
  var mouseY = e.pageY - this.offsetTop;  //获得区域坐标y

});
此教程由php100提供

下载地址 点击下载

源码下载：

26-1.zip