JavaScript30之08 – 快乐的HTML5 Canvas

 

实现点击绘画功能。

监听到mousemove时调用draw。

isDrawing决定调用draw时是否绘画。监听mouseup和mouseout来维护isDrawing。

在draw中绘制路径时，路径的起始点为lastX, lastY。mousedown的位置或者是上一次路径的结尾。终点为mousemove时间的e.offsetX, e.offsetY。

    <canvas id="draw" width="800" height="800"></canvas>
    <script>
        const canvas = document.querySelector('#draw');
        /* <canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
            getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 */
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        ctx.strokeStyle = '#BADA55';
        ctx.lineJoin = 'round'; // 两条线相交时，所创建的拐角类型
        ctx.lineCap = 'round'; // 线条的结束端点样式
        ctx.lineWidth = 10;
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        let hue = 0;
        function draw(e) {
            if (!isDrawing) return;
            // console.log(e);
            ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
            ctx.lineWigdth = Math.abs(hue - 180);
            ctx.beginPath(); // 起始一条路径，或重置当前路径
            ctx.moveTo(lastX, lastY); // 把路径移动到画布中的指定点，不创建线条
            ctx.lineTo(e.offsetX, e.offsetY); // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
            ctx.stroke(); // 绘制已定义的路径
            lastX = e.offsetX;
            lastY = e.offsetY;
            hue++;
            hue = hue % 360;
        }
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        });
        canvas.addEventListener('mouseup', () => isDrawing = false);
        canvas.addEventListener('mouseout', () => isDrawing = false);
    </script>