Heim >Web-Frontend >H5-Tutorial >So zeichnen Sie Linien mit Leinwand

So zeichnen Sie Linien mit Leinwand

php中世界最好的语言Original: 2018-03-14 09:45:172364Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie Leinwand zum Zeichnen von Linien verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Leinwand zum Zeichnen von Linien gelten. Hier ist ein praktischer Fall, schauen wir uns das an.

canvas ist ein neues Tag in HTML5. Das

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8"/>
    <title>Canvas绘图与动画基础</title></head><body><style>
    #canvas{        border: 1px solid #aaa;        text-align: center;
    }</style><canvas id="canvas" width="1024" height="768">
    当用户浏览器不支持Canvas,请更换浏览器重试！</canvas></body></html>

Wenn der Browser das Canvas-Tag nicht unterstützt, werden die Schriftarten im Canvas-Tag angezeigt. Unter normalen Umständen wird das Gemälde im Canvas angezeigt.
Jetzt beginnen wir mit dem Zeichnen einer Linie.
Besorgen Sie sich zunächst die Leinwand:

var canvas = document.getElementById("canvas");

Die Breite und Höhe der Leinwand sind im Allgemeinen nicht im Stil festgelegt. Sie können wie gezeigt auf der gleichen Leinwand- und ID-Ebene festgelegt werden im HTML oben, oder verwenden Sie die JS-Einstellungen.

canvas.width=1014;
 canvas.height=768;

Komm runter und erfahre den Kontext des Zeichnens

var context = canvas.getContext("2d");

Wir nutzen im Allgemeinen den Kontext, um die Leinwand zu bedienen. Komm runter, wir sind dabei Erfahren Sie mehr über den Code:

        var context = canvas.getContext("2d");//得到绘图的上下文环境
        context.beginPath();//开始绘制线条，若不使用beginPath，则不能绘制多条线条
        context.moveTo(100, 100);//线条开始位置
        context.lineTo(700, 700);//线条经过点
        context.lineTo(100, 700);
        context.lineTo(100, 100);
        context.closePath();//结束绘制线条，不是必须的
       
        context.lineWidth = 5;//设置线条宽度
        context.strokeStyle = "red";//设置线条颜色
        context.stroke();//用于绘制线条
        context.beginPath();
        context.moveTo(200, 100);
        context.lineTo(700, 600);
        context.closePath();
        context.strokeStyle = "black";
        context.stroke();

Führen Sie den obigen Code aus und erhalten Sie ein rotes geschlossenes Dreieck und eine schwarze durchgezogene Linie, wie in der Abbildung unten gezeigt:

So zeichnen Sie Linien mit Leinwand

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Empfohlene Lektüre:

Wie man mit Canvas ein buntes Tangram zeichnet

Was bedeutet class="no-js " bedeuten?

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Linien mit Leinwand. 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：Wie man mit Leinwand ein buntes Tangram zeichnetNächster Artikel：Wie man mit Leinwand ein buntes Tangram zeichnet

In Verbindung stehende Artikel

Mehr sehen