Einführung in die grundlegende Verwendung von HTML5 Canvas

Dieser Artikel bietet Ihnen eine Einführung in die grundlegende Verwendung von HTML5 Canvas. Ich hoffe, dass er für Freunde hilfreich ist.

Canvas ist mein Lieblingstag unter all meinen liebsten neuen Funktionen in HTML5. Da es so leistungsstark ist, können alle möglichen interessanten Spezialeffekte erzielt werden.

1. Grundlegende Verwendung von Canvas

- Es ist ein Inline-Blockelement
- Die Standardgröße beträgt 300 x 150, es kann nicht in CSS gestaltet werden, sondern nur in Tags. Schreiben Sie seine Eigenschaften innen. Zum Beispiel Breite = 400, Höhe = 300
- Leinwand abrufen
var canvas = document. querySelector("canvas")
- Holen Sie sich den Pinsel (Kontext)
var ctx = canvas.getContext('2d')

2. Canvas zeichnet grundlegende Grafiken

Rechteck füllen
ctx.fillRect(0,0,100,100)
füllen: bezieht sich auf die Füllung
Rect: ein Rechteck zeichnen

Grafikeinstellungsstil füllen
ctx.fillStyle = 'green'

Strichrechteck
ctx.StrokeRect(100,100,100,100)

Strichgrafik-Einstellungsstil
ctx.StrokeStyle = 'white'
ctx.lineWidth = 100

Löschen Sie die gesamte Leinwand
ctx.clearRect(0,0,canvas.width,canvas.height)

Zeichnen Sie ein Liniensegment
ctx.moveTo(100,100)
ctx.lineTo( 100.100 )

Stroke
ctx.Stroke()

Fill
ctx.fill()-

Start- und Endpunkte sind mit
ctx verbunden . closePath()
Beginn von ctx.save()
...
Ende von ctx.restore()

3. Mit Canvas können wir Zeichnen Sie eine Uhr, einschließlich Skalen und Stundenzeigern. Die Skala, die sich jede Sekunde bewegt, kann von Zeit zu Zeit über einen Timer mithilfe des Datenobjekts aktualisiert werden.

var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    function move() {
        ctx.save()
            ctx.translate(300,300)
            //  初始化一些公共的样式
            ctx.lineCap = 'round'
            ctx.strokeStyle = 'black'
            ctx.lineWidth = 8
            ctx.scale(0.5,0.5)

            // 画外面的圆
            ctx.save();
                ctx.beginPath();
                ctx.strokeStyle = 'gold';
                ctx.arc(0,0,150,0,2*Math.PI);
                ctx.stroke();
            ctx.restore();

            // 画里面的刻度
            ctx.save()
                ctx.beginPath();
                for (var i=0; i <p>Das Standbild ist wie unten gezeigt. </p><p></p><p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/207/367/164/1542961926883406.png" title="1542961926883406.png" alt="Einführung in die grundlegende Verwendung von HTML5 Canvas"></span>Rubbelkarteneffekt</p><h4>Durch die Nutzung der grafischen Syntheseeigenschaften von Leinwand kann der Effekt der Bildsynthese erzielt werden. Speziell für Rubbellose geeignet. </h4>globalCompositeOperation-Eigenschaft legt fest oder gibt zurück, wie ein (neues) Quellbild auf das (vorhandene) Zielbild gezeichnet wird <p>Quellbild = die Zeichnung, die Sie auf der Leinwand platzieren möchten <br>Zielbild = das, das Sie bereits haben platziert Zeichnung auf Leinwand<br><br></p><p   style="max-width:90%"></p><pre class="brush:php;toolbar:false">var  canvas = document.querySelector("canvas")
    var ctx = getCtx()
    log(ctx)
    ctx.fillStyle = 'yellow'
    ctx.fillRect(0,0,400,400)

    ctx.globalCompositeOperation = 'destination-out';

    // 鼠标按下
    canvas.onmousedown = function (event) {
        ctx.beginPath()
        ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,
            20,0,2*Math.PI)
        ctx.fill()
        // 鼠标移动
        document.onmousemove = function (event) {
            ctx.beginPath()
            ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,
            20,0,2*Math.PI)
            ctx.fill()
        }

        // 鼠标抬起
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null
        }
        return false
    }

Das obige ist der detaillierte Inhalt vonEinführung in die grundlegende Verwendung von HTML5 Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!