suchen

Heim >Web-Frontend >H5-Tutorial >Was bedeutet das Canvas-Tag?

Was bedeutet das Canvas-Tag?

云罗郡主
云罗郡主Original
2019-01-26 10:55:299061Durchsuche

Canvas ist ein HTML-Element, in das Bilder mithilfe von Skripten (normalerweise JavaScript) gezeichnet werden können. Es kann zum Erstellen von Fotoalben oder zum Erstellen einfacher (und nicht so einfacher) Animationen oder sogar zur Echtzeitverarbeitung und -wiedergabe von Videos verwendet werden.

Was bedeutet das Canvas-Tag?

In HTML wird das Canvas-Tag zum Definieren von Grafiken wie Diagrammen und anderen Bildern verwendet. Zum Zeichnen von Grafiken wie dem Zeichnen eines roten Rechtecks ​​oder eines Farbverlaufs müssen Skripte verwendet werden Rechteck auf der Leinwand, ein farbiges Rechteck und etwas farbiger Text.

1. Was ist Canvas?

Das HTML5-Canvas-Element wird zum Zeichnen von Grafiken verwendet, was über Skripte erfolgt (normalerweise JavaScript).

Das Canvas-Tag ist nur ein Im Grafikcontainer müssen Sie Skripte zum Zeichnen von Grafiken verwenden.

Mit der Leinwand können Sie auf vielfältige Weise Pfade, Kästchen, Kreise und Zeichen zeichnen und Bilder hinzufügen.

2. Grundlegende Verwendung von Canvas

style="border:1px solid # 000000 ;">

2.1 Das Element

sieht genauso aus wie das Was bedeutet das Canvas-Tag?-Tag, außer hat nur zwei optionale Attribute, width und height, aber keine src- und alt-Attribute.

Wenn die Attribute „widht“ und „height“ für nicht festgelegt sind, beträgt die Standardbreite 300, die Höhe 150 und die Einheiten sind px. Sie können auch CSS-Attribute verwenden, um die Breite und Höhe festzulegen. Wenn die Breiten- und Höhenattribute jedoch nicht mit dem ursprünglichen Verhältnis übereinstimmen, wird es verzerrt. Daher wird empfohlen, niemals CSS-Eigenschaften zum Festlegen der Breite und Höhe von zu verwenden.

2.2 Fall

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
canvas {
    border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="tutorial" width="300" height="300"></canvas>
<script type="text/javascript">
function draw(){
    var canvas = document.getElementById(&#39;tutorial&#39;);
    if(!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(200,0,0)";
      //绘制矩形
    ctx.fillRect (10, 10, 55, 50);
 
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>
</body>
</html>

Der Effekt ist wie folgt:

Was bedeutet das Canvas-Tag?


Das obige ist der detaillierte Inhalt vonWas bedeutet das Canvas-Tag?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html border canvas
Stellungnahme：
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
Vorheriger Artikel：Was bedeutet WebSocket in HTML5?Nächster Artikel：Was bedeutet WebSocket in HTML5?

In Verbindung stehende Artikel

Mehr sehen