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

#php100{ border:1px solid #ccc;}

var canvas = document.getElementById('php100');

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

p100.lineWidth=10

p100.strokeStyle="red";

var pp=false;

$(function () {

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

var mouseX = e.pageX - this.offsetLeft;

var mouseY = e.pageY - this.offsetTop;

pp = true;

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

})

//当鼠标抬起时

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

pp=false;

});

//当鼠标移动时

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

var mouseX = e.pageX - this.offsetLeft;

var mouseY = e.pageY - this.offsetTop;

if(pp){

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

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

}

})

})

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点！

本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。