Use canvas to implement a simple drawing tool

Canvas is a very important update highlight in HTML5, Canvas, alternative to Flash! Make animations, make games. Now we use the basics of canvas to make a simple artboard.

The detailed process and ideas are explained in the code comments> _ <.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            display: block;
            margin:10px auto;
            border:2px solid #9FA8DA;
        }

        .option {
            display: flex;
            justify-content: space-around;
            width: 500px;
            height: 30px;
            margin: auto;
        }

        #text {
            text-align: center;
        }
    </style>
</head>
<body>
    <canvas width="500px" height = "500px">
        您的浏览器不支持canvas,请更换谷歌浏览器或升级您的浏览器
    </canvas>
    <div class="option">
        <input type="color" id = 'colorList'>
        <button id = "randomColor">随机颜色</button>
        <button id="add">加粗</button>
        <input type="text" id = "text" style = "width: 20px;" />
        <button id="reduce">变细</button>
        <button id="clear">清屏</button>
    </div>
    <script>
        //获取canvas的DOM对象
        let canvas = document.querySelector('canvas');
        
        //获取上下文对象
        let ctx = canvas.getContext('2d');
        
        //定义初始的笔触样式
        let strokeStyle = "#000";
        let lineWidth = 6;
        text.value = lineWidth;
        
        //选择颜色
        colorList.onchange = function () {
            strokeStyle = this.value;
        }

        //产生随机颜色
        randomColor.onclick = function() {
            let arr = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];
            let str = '#';
            for (let i = 0; i < 6 ; i++) {
                str += arr[Math.floor(Math.random()*16)];    
            }
            strokeStyle = str;
            // console.log(strokeStyle)
        }

        //加粗线条
        add.onclick = function() {
            if(lineWidth < 12) {
                lineWidth += 2;
            }
            text.value = lineWidth;
        }

        //线条变细
        reduce.onclick = function() {
            if(lineWidth > 2) {
                lineWidth -= 2;
            }
            text.value = lineWidth;
        }

        //鼠标按下事件
        canvas.onmousedown = function(ev) {
            ev = ev || window.event;
            //更改颜色与笔触粗细
            ctx.strokeStyle = strokeStyle; 
            ctx.lineWidth = lineWidth;
            //开始绘图
            ctx.beginPath();
            ctx.moveTo(ev.offsetX,ev.offsetY);

            //鼠标移动事件
            canvas.onmousemove = function(ev) {
                ctx.lineTo(ev.offsetX,ev.offsetY);
                //绘制
                ctx.stroke();
               
            }

            //鼠标抬起时取消移动和抬起事件绑定
            document.onmouseup = function(ev) {
                document.onmouseup = null;
                canvas.onmousemove = null;
            }
        }

        //清空屏幕
        clear.onclick = function() {
            ctx.clearRect(0 , 0 , 500 , 500);
        }
        
    </script>
</body>
</html>

The final effect

It should be noted that the mouse up event should be bound to the document. If it is still bound to the canvas, there will be bugs, as follows:

         //鼠标按下事件
        canvas.onmousedown = function(ev) {
            ev = ev || window.event;
            //更改颜色与笔触粗细
            ctx.strokeStyle = strokeStyle; 
            ctx.lineWidth = lineWidth;
            //开始绘图
            ctx.beginPath();
            ctx.moveTo(ev.offsetX,ev.offsetY);

            //鼠标移动事件
            canvas.onmousemove = function(ev) {
                ctx.lineTo(ev.offsetX,ev.offsetY);
                //绘制
                ctx.stroke();
               
            }

            //鼠标抬起时取消移动和抬起事件绑定
            canvas.onmouseup = function(ev) {
                canvas.onmouseup = null;
                canvas.onmousemove = null;
            }
        }

It is normal when I move the mouse slowly into and out of the canvas area, but if I move the mouse very quickly, you can continue to draw after the mouse is moved out quickly.Moving too fast simply cannot react, as shown in the following figure , So we should bind the mouse up event to the document.

lhrdlp

Published 34 original articles · Liked145 · Visits7188

Private letter concerns

Use canvas to implement a simple drawing tool

Guess you like