suchen

Heim >Web-Frontend >H5-Tutorial >Detaillierte Einführung in HTML5-Canvas-Codebeispiele für grundlegende Zeichenliniensegmente

Detaillierte Einführung in HTML5-Canvas-Codebeispiele für grundlegende Zeichenliniensegmente

黄舟
黄舟Original
2017-03-14 15:44:161995Durchsuche

3856173a0eceb679792f65a38e1fcb00c2caaf3fc160dd2513ce82f021917f8b ist ein neues -Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. Dieser Artikel richtet sich hauptsächlich an alle Einführung in die grundlegenden Zeichnungsmethoden zum Zeichnen von Liniensegmenten in HTML5 Canvas. Interessierte Freunde können sich auf

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b beziehen Das hinzugefügte Tag wird tatsächlich zum Zeichnen von Grafiken verwendet. Seine Besonderheit besteht darin, dass dieses Tag ein CanvasRenderingContext2DObjekt erhalten kann, das wir JavaScript verwenden können Skript zur Steuerung des zu zeichnenden Objekts.

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b ist nur ein Container zum Zeichnen von Grafiken zusätzlich zu ID, Klasse, Stil und anderen AttributenEs gibt auch die Eigenschaften Höhe und Breite. Es gibt drei Hauptschritte zum Zeichnen auf dem 5ba626b379994d53f7acf72a64f9b697>-Element:

1. Holen Sie sich das

DOM-Objekt , das dem 5ba626b379994d53f7acf72a64f9b697-Element entspricht; 2. Rufen Sie die Methode getContext() des Canvas-Objekts auf, um ein CanvasRenderingContext2D-Objekt zu erhalten.
3. Rufen Sie das CanvasRenderingContext2D-Objekt zum Zeichnen auf.

Liniensegmente moveTo() und lineTo() zeichnen

Das Folgende ist ein einfaches 5ba626b379994d53f7acf72a64f9b697 Zeichenbeispiel: 

XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>canvas绘图演示</title>  
    <style type="text/css">  
        #canvas{   
            border: 1px solid #ADACB0;   
            display: block;   
            margin: 20px auto;   
        }   
    </style>  
</head>  
<body>  
    <canvas id="canvas" width="300" height="300">  
        你的浏览器还不支持canvas   
    </canvas>  
</body>  
<script type="text/javascript">  
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    //设置对象起始点和终点   
    context.moveTo(10,10);   
    context.lineTo(200,200);   
    //设置样式   
    context.lineWidth = 2;   
    context.strokeStyle = "#F5270B";   
    //绘制   
    context.stroke();   
</script>  
</html>



Detaillierte Einführung in HTML5-Canvas-Codebeispiele für grundlegende Zeichenliniensegmente

Wenn nicht übergeben, moveTo() Geben Sie speziell an, dass der Startpunkt von lineTo() auf dem vorherigen Punkt basiert. Wenn Sie den Startpunkt erneut auswählen müssen, müssen Sie daher die Methode moveTo() übergeben. Wenn Sie Stile für verschiedene Liniensegmente festlegen müssen, müssen Sie einen Pfad über context.beginPath() erneut öffnen. Hier ist ein Beispiel: 

JavaScript Code复制内容到剪贴板
<script type="text/javascript">   
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    //设置对象起始点和终点   
    context.beginPath();   
    context.moveTo(100,100);   
    context.lineTo(700,100);   
    context.lineTo(700,400);   
    context.lineWidth = 2;   
    context.strokeStyle = "#F5270B";   
    //绘制   
    context.stroke();   
  
    context.beginPath();   
    context.moveTo(100,200);//这里的moveTo换成lineTo效果是一样的   
    context.lineTo(600,200);   
    context.lineTo(600,400);   
    //strokeStyle的颜色有新的值，则覆盖上面设置的值   
    //lineWidth没有新的值，则按上面设置的值显示   
    context.strokeStyle = "#0D25F6";   
    //绘制   
    context.stroke();   
</script>



Detaillierte Einführung in HTML5-Canvas-Codebeispiele für grundlegende Zeichenliniensegmente

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in HTML5-Canvas-Codebeispiele für grundlegende Zeichenliniensegmente. 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：Detaillierte Erklärung des Navigations-Tags in HTML5Nächster Artikel：Detaillierte Erklärung des Navigations-Tags in HTML5

In Verbindung stehende Artikel

Mehr sehen