suchen

Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie mit Leinwand ein nützliches Graffiti-Zeichenbrett

So erstellen Sie mit Leinwand ein nützliches Graffiti-Zeichenbrett

php中世界最好的语言
php中世界最好的语言Original
2018-03-12 14:50:172576Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie aus Leinwand ein nützliches Graffiti-Zeichenbrett herstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von Leinwand, um ein nützliches Graffiti-Zeichenbrett herzustellen? Schauen Sie mal rein. Holen Sie sich die Cursorkoordinaten im Canvas

Der Code zum Abrufen der Koordinaten ist sehr einfach: 

<!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>
Hinweis: Da die Ereignisse der Maus und des Touchscreens unterschiedlich sind, können Sie sie abrufen Sie können sie ausführen, indem Sie einfach mit der Maus über die Leinwand fahren. Jetzt muss der Touchscreen gedrückt werden, und das zurückgegebene Ereignisobjekt ist ebenfalls anders.

2. Steuern, ob gezeichnet werden soll

Die Steuerung, ob gezeichnet werden soll, ist eigentlich sehr einfach, das heißt, den Wert der selbstdefinierten Variablen zu beurteilen

Zeichnung bei verschiedenen zu steuernden Ereignissen

3. Strichzeichnung 
<!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>

Der Strichzeichnungscode ist ebenfalls sehr einfach

Integrieren Sie den Strichzeichnungscode in das Ereignis: 
....//线条绘制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();
}
....

4. Optimierung der Zeichnungslinien
<!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>

Es ist in Ordnung, wenn die Breite der gezeichneten Linie relativ gering ist, aber sobald sie dicker ist, treten Schreibprobleme auf:

Zu diesem Zeitpunkt nur Ändern Sie den Zeichencode leicht.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! 
....//线条绘制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();
}
....

Verwandte Lektüre:

So verwenden Sie s-xlsx zum Zusammenführen von Zellen


js-xlsx liest XLSX-Dateien Ausführliche Erklärung von asynchron


So verwenden Sie s-xlsx zum Importieren und Exportieren von Excel-Dateien (Teil 2)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Leinwand ein nützliches Graffiti-Zeichenbrett. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie js-xlsx zum Zusammenführen von ZellenNächster Artikel：So verwenden Sie js-xlsx zum Zusammenführen von Zellen

In Verbindung stehende Artikel

Mehr sehen