05 canvas绘制画板
2016-12-07 本文已影响25人
夜幕小草
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas实现画板</title>
</head>
<body style="padding: 100px;">
<canvas id="canvas" width="900" height="600" style="border:1px solid #000"></canvas>
<script>
// 1. 获取标签
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 2. 监听鼠标按下的事件
canvas.onmousedown = function (e) {
// 2.0 清屏
// ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = 900;
// 2.1 设置起点
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
// 2.2 监听鼠标的移动
canvas.onmousemove = function (e) {
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
};
// 2.3 监听鼠标的抬起
canvas.onmouseup = function () {
canvas.onmousemove = null;
canvas.onmouseup = null;
}
}
</script>
</body>
</html>
