<DOCTYPE html>
<html>
<head>
<title>canvas简单画板</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var canvas = $('#myCanvas')[0];
var myCanvas=canvas.getContext("2d");
myCanvas.strokeStyle="red";
myCanvas.lineWidth=2;
var flag = false;
//鼠标按下事件，准备绘图
$('#myCanvas').mousedown(function(e){
flag = true;
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
myCanvas.moveTo(mouseX,mouseY);
});
//鼠标按键松开事件，绘图结束
$('#myCanvas').mouseup(function(e){
flag = false;
});
//鼠标移动事件，开始绘图
$('#myCanvas').mousemove(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
if(flag){
myCanvas.lineTo(mouseX+4,mouseY+4);
myCanvas.stroke();
}
});
});
</script>
<head>
绘图板<br>
<canvas id="myCanvas" width="900" height="600" style="border:1px solid #FCF">
你的浏览器不支持HTML5
</canvas>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
