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.
- 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')
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()
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
