canvas 动态画线_H5之家 - 中国HTML5教程资源分享第一站

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>

<canvas></canvas>
<script>
// 加载onload事件，页面启动就进行画图
window.onload = drawImage();
// 画图函数
function drawImage(){
// 获取canvas这个dom元素
var canvas = document.getElementById('canvas');
// 获取上下文环境
var ctx = canvas.getContext('2d');
// 鼠标按下获取事件的坐标点
canvas.onmousedown = function(e){
var x = e.layerX;
var y = e.layerY;
console.log(x+"----"+y);
// 开始画图，beginPath 实际的功能是清除缓存
ctx.beginPath();
// 移动到开始点
ctx.moveTo(x,y);
// 鼠标移动开始画图
canvas.onmousemove= function (e1) {
var ex = e1.layerX;
var ey = e1.layerY;
console.log("ex"+ex+"ey"+ey);
// 移动到的点
ctx.lineTo(ex,ey);
// 告诉画笔开始画图了
ctx.stroke();
};
// 鼠标抬起时结束画图
canvas.onmouseup=function () {
canvas.onmousemove = null;
canvas.onmouseup = null;
};
};
}
</script>
</body>
</html>

Tags：html