Comment utiliser la toile pour créer une planche à dessin de graffiti utile-js tutoriel-php.cn

Comment utiliser la toile pour créer une planche à dessin de graffiti utile

php中世界最好的语言

Libérer： 2018-03-12 14:50:17

original

2518 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser la toile pour créer une planche à dessin pour graffitis utile. Quelles sont les précautions pour utiliser la toile pour créer une planche à dessin pour graffitis utile. jetez un oeil. Obtenez les coordonnées du curseur dans le canevas

Le code pour obtenir les coordonnées est très simple :

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <style>
        *{margin: 0;padding: 0}    </style></head><body>
    <canvas id="board" style="border: 1px #ccc solid;"></canvas>
    <span id="point"></span>
    <script>
        var canvas = document.getElementById(&#39;board&#39;);        var context = canvas.getContext(&#39;2d&#39;);        var current = {            color: &#39;black&#39;,//<===画笔颜色配置
            width: 1//线条宽度 
        };        //获取点坐标
        function getPoint(e) {            if (e.touches && e.touches.length > 0) {                var touch = e.touches[0];                return { x: touch.pageX, y: touch.pageY };
            }            return { x: e.clientX, y: e.clientY };
        }        //鼠标移动
        function onMouseMove(e) {            var p = getPoint(e);            document.getElementById("point").innerHTML=p.x+"-"+p.y;
        }
        canvas.width = 600;
        canvas.height = 300; 
        canvas.addEventListener(&#39;mousemove&#39;, onMouseMove, false); //<==兼容PC
        canvas.addEventListener(&#39;touchmove&#39;, onMouseMove, false);//<===兼容安卓或其他系统
    </script></body></html>

Copier après la connexion

Remarque : les événements de la souris et de l'écran tactile étant différents, vous pouvez obtenir en passant simplement la souris sur le canevas. Maintenant, il faut appuyer sur l'écran tactile et l'objet Event renvoyé est également différent.

2. Contrôler s'il faut dessiner

Contrôler s'il faut dessiner est en fait très simple, c'est-à-dire juger la valeur de la variable auto-définie dessiner à différents événements à contrôler

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        *{margin: 0;padding: 0}    </style></head><body>
    <canvas id="board" style="border: 1px #ccc solid;"></canvas>
    <span id="point"></span>
    <script>
        var canvas = document.getElementById(&#39;board&#39;);        var context = canvas.getContext(&#39;2d&#39;);        var current = {            color: &#39;black&#39;,//<===画笔颜色配置
            width: 1//线条宽度 
        };        var drawing = false;//<===是否绘制
        //获取点坐标
        function getPoint(e) {            if (e.touches && e.touches.length > 0) {                var touch = e.touches[0];                return { x: touch.pageX, y: touch.pageY };
            }            return { x: e.clientX, y: e.clientY };
        }         //鼠标按下
         function onMouseDown(e) {
                drawing = true; 
            }            //鼠标弹起
            function onMouseUp(e) {                if (!drawing) { return; }
                drawing = false; 
            }        //鼠标移动
        function onMouseMove(e) {            if (!drawing) { return; }            var p = getPoint(e);            document.getElementById("point").innerHTML=p.x+"-"+p.y;
        }
        canvas.width = 600;
        canvas.height = 300; 
        canvas.addEventListener(&#39;mousedown&#39;, onMouseDown, false);
        canvas.addEventListener(&#39;mouseup&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;mouseout&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;mousemove&#39;, onMouseMove, false);
        canvas.addEventListener(&#39;touchstart&#39;, onMouseDown, false);
        canvas.addEventListener(&#39;touchend&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;touchmove&#39;, onMouseMove, false);    </script></body></html>

Copier après la connexion

3. Dessin au trait

Le code du dessin au trait est également très simple

....//线条绘制function drawLine(x0, y0, x1, y1, color, width) {
    context.beginPath();
    context.moveTo(x0, y0);
    context.lineTo(x1, y1);
    context.strokeStyle = color;
    context.lineWidth = width; 
    context.stroke();
    context.closePath();
}
....

Copier après la connexion

Intégrez le code du dessin au trait dans l'événement :

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title></head><body>
    <canvas id="board" style="border: 1px #ccc solid;"></canvas>
    <span id="point"></span>
    <script>
        var canvas = document.getElementById(&#39;board&#39;);        var context = canvas.getContext(&#39;2d&#39;);        var current = {            color: &#39;black&#39;,//<===画笔颜色配置
            width: 1//线条宽度 
        };        var drawing = false;//<===是否绘制
        //获取点坐标
        function getPoint(e) {            if (e.touches && e.touches.length > 0) {                var touch = e.touches[0];                return { x: touch.pageX, y: touch.pageY };
            }            return { x: e.clientX, y: e.clientY };
        }        //线条绘制
        function drawLine(x0, y0, x1, y1, color, width) {
            context.beginPath();
            context.moveTo(x0, y0);
            context.lineTo(x1, y1);
            context.strokeStyle = color;
            context.lineWidth = width; 
            context.stroke();
            context.closePath();
        }        //鼠标按下
        function onMouseDown(e) {
            drawing = true;            //记录按下点
            var p = getPoint(e);
            current.x = p.x;
            current.y = p.y;
        }        //鼠标弹起
        function onMouseUp(e) {            if (!drawing) { return; }
            drawing = false;            //绘制结束点
            var p = getPoint(e);
            drawLine(current.x, current.y, p.x, p.y, current.color, current.width);
        }        //鼠标移动
        function onMouseMove(e) {            if (!drawing) { return; }            var p = getPoint(e);            document.getElementById("point").innerHTML = p.x + "-" + p.y;            //移动绘制
            drawLine(current.x, current.y, p.x, p.y, current.color, current.width);
            current.x = p.x;
            current.y = p.y;
        }
        canvas.width = 600;
        canvas.height = 300;
        canvas.addEventListener(&#39;mousedown&#39;, onMouseDown, false);
        canvas.addEventListener(&#39;mouseup&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;mouseout&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;mousemove&#39;, onMouseMove, false);
        canvas.addEventListener(&#39;touchstart&#39;, onMouseDown, false);
        canvas.addEventListener(&#39;touchend&#39;, onMouseUp, false);
        canvas.addEventListener(&#39;touchmove&#39;, onMouseMove, false);    </script></body></html>

Copier après la connexion

4. Optimisation des lignes de dessin

Ce n'est pas grave lorsque la largeur de la ligne tracée est relativement petite, mais une fois qu'elle est plus épaisse, il y aura des problèmes d'écriture :

Pour le moment, juste changez légèrement le code de dessin

....//线条绘制function drawLine(x0, y0, x1, y1, color, width) {
    context.beginPath();
    context.moveTo(x0, y0);
    context.lineTo(x1, y1);
    context.strokeStyle = color;
    context.lineWidth = width; 
    //-----加入-----
    context.lineCap = "round";
    context.lineJoin = "round";    //-----加入-----
    context.stroke();
    context.closePath();
}
....

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser s-xlsx pour fusionner des cellules

js-xlsx lit les fichiers xlsx Explication détaillée d'asynchrone

Comment utiliser s-xlsx pour importer et exporter des fichiers Excel (Partie 2)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!