Heim > Web-Frontend > H5-Tutorial > Hauptteil

So zeichnen Sie Linien mit Leinwand

php中世界最好的语言
Freigeben: 2018-03-14 09:45:17
Original
2328 Leute haben es durchsucht

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 -Tag ist nur ein Grafikcontainer, und Sie müssen ein Skript verwenden, um Grafiken zu zeichnen.
Als nächstes verwenden wir die Leinwand, um Linien zu zeichnen.
Erstellen Sie zunächst eine neue HTML-Datei und fügen Sie der Datei das Canvas-Tag hinzu, wie unten gezeigt.

<!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>
Nach dem Login kopieren

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");
Nach dem Login kopieren

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;
Nach dem Login kopieren

Komm runter und erfahre den Kontext des Zeichnens

var context = canvas.getContext("2d");
Nach dem Login kopieren


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();
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage