05 canvas绘制画板

作者: 夜幕小草 | 来源:发表于2016-12-07 23:15 被阅读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>