Canvas muss Breite und Höhe direkt in den tag_html5-Tutorial-Skills definieren

Wenn ich früher Bilder auf Leinwand gezeichnet habe, habe ich die Breite und Höhe immer direkt in das Canvas-Tag geschrieben. Ich habe jedoch nie untersucht, warum die Breite und Höhe direkt in das geschrieben werden sollte Canvas-Tag, da dies in verschiedenen Beispielen der Fall ist. Heute hat Sir Wang eine Frage gestellt: Wenn Breite und Höhe im

Schauen Sie sich zuerst den Code an:

Kopieren Sie den Code

Der Code lautet wie folgt:

< ;!DOCTYPE html>



> ;
< ;meta name="Keywords" content="">

> ;
< ;/head>

< ;/canvas>
<script><br /> function draw() {<br /> var canvas=document.getElementById('canvas');<br /> var context=canvas.getContext(' 2d');<br /> context.beginPath();<br /> context.moveTo(20,20);<br /> context.lineTo(200,100);<br /> context.lineWidth=5;<br /> context.Stroke ();<br /> }<br /></script>

1. Schreiben Sie direkt in :

2. Löschen Sie die Breite und Höhe in , width: 400; height: 300;

Warum sind die Wirkungen der beiden unterschiedlich?

Canvas kann wie andere Tags auch über CSS gestaltet werden. Hier ist jedoch zu beachten, dass die Standardbreite und -höhe der Leinwand 300 Pixel * 150 Pixel beträgt. Wenn die Leinwand verwendet wird, wird die Leinwand tatsächlich auf eine Breite und Höhe von 300 Pixel * 150 Pixel ausgedehnt In dieser Situation können die Grafiken, die Sie erhalten, durch Verformung verursacht werden. Daher sollten beim Zeichnen auf Leinwand die Breite und Höhe direkt im Canvas-Tag definiert werden.