So zeichnen Sie Linien mit Leinwand-H5-Tutorial-php.cn

So zeichnen Sie Linien mit Leinwand

php中世界最好的语言

Freigeben： 2018-03-14 09:45:17

Original

2363 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

<!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!