Verwenden Sie Canvas, um ein einfaches Zeichenwerkzeug zu implementieren

Canvas ist ein sehr wichtiges Update-Highlight in HTML5, Canvas, Alternative zu Flash! Animationen machen, Spiele machen. Jetzt verwenden wir die Grundlagen der Leinwand, um eine einfache Zeichenfläche zu erstellen.

Der detaillierte Prozess und die Ideen werden in den Codekommentaren> _ <erläutert.

<!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>

Der endgültige Effekt

Es ist zu beachten, dass das Mouse-Up-Ereignis an das Dokument gebunden sein sollte. Wenn es weiterhin an die Zeichenfläche gebunden ist, treten folgende Fehler auf:

         //鼠标按下事件
        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;
            }
        }

Es ist normal, wenn ich die Maus langsam in den Leinwandbereich hinein und aus diesem heraus bewege. Wenn ich die Maus jedoch sehr schnell bewege, können Sie weiter zeichnen, nachdem die Maus schnell herausgezogen wurde. Zu schnelles Bewegen kann einfach nicht reagieren, wie in der folgenden Abbildung gezeigt Also sollten wir das Mouse-Up-Ereignis an das Dokument binden.

lhrdlp

Veröffentlicht 34 Originalartikel · Liked145 · Visits7188

Privatbrief Bedenken

Verwenden Sie Canvas, um ein einfaches Zeichenwerkzeug zu implementieren

Ich denke du magst