<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas绘图</title>>
</head>>
<body>
<canvas id="canvas1" width="1600" height="800"></canvas>
<script type="text/javascript">
var canvas1 = document.getElementById("canvas1");
var ctx = canvas1.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle = "blue";
//鼠标按下去就开始划线
canvas1.onmousedown = function() {
canvas1.onmousemove = function(e) {
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
}
//松开就停止划线
canvas1.onmouseup = function(){
canvas1.onmousemove = function(e){
ctx.moveTo(e.clientX, e.clientY);
}
}
//双击就清空
canvas1.ondblclick = function(){
ctx.clearRect(0, 0, canvas1.width, canvas1.height);
ctx.beginPath(); //重置路径
}
</script>
</body>
</html>
注释：用谷歌浏览器打开，点击即可任意画图，右键可以保存为图片文件
扫一扫
1860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
