So zeichnen Sie Grafiken mit der CanvasAPI von H5
Dieses Mal stelle ich Ihnen die Canvas-API von H5 zum Zeichnen von Grafiken vor und wie verwende ich Canvas zum Erstellen von Grafiken? Was sind die Vorsichtsmaßnahmen für die Erstellung von Grafiken mit Canvas? Hier sind praktische Fälle, werfen wir einen Blick darauf.
Canvas-Element
Der folgende HTML-Code definiert ein Canvas-Element.
<!DOCTYPE html>
<html>
<head>
<title>Canvas快速入门</title>
<meta charset="utf-8"/>
</head>
<body>
<div>
<canvas id="mainCanvas" width="640" height="480"></canvas>
</div>
</body>
</html>Greifen Sie über die folgende Javascript-Anweisung auf das Canvas-Element zu:
//DOM写法
window.onload = function () {
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
};
//jQuery写法
$(document).ready(function () {
var canvas = $("#mainCanvas");
var context = canvas.get(0).getContext("2d");
});
//接下来就可以调用context的方法来调用绘图API2. Basic API
2.1 Koordinatensystem
Canvas 2D-Rendering Der Kontext verwendet das ebene kartesische Koordinatensystem, die obere linke Ecke ist der Ursprung (0,0) und 1 Einheit des Koordinatensystems entspricht 1 Pixel des Bildschirms.
//绘制一个填充矩形 context.fillRect(x, y, width, height) //绘制一个边框矩形 context.strokeRect(x, y, width, height) //清除一个矩形区域 context.clearRect(x, y, width, height)
2.2.2 Linien
Es gibt einige Unterschiede zwischen dem Zeichnen von Linien und dem Zeichnen von Grafiken. Linien werden eigentlich Pfade genannt. Um einen einfachen Pfad zu zeichnen, müssen Sie zuerst die beginPath-Methode aufrufen, dann moveTo aufrufen, um die Startpunktkoordinaten des Pfads festzulegen, dann lineTo aufrufen, um die Endpunktkoordinaten des Liniensegments festzulegen (kann mehrmals festgelegt werden) und dann Rufen Sie closePath auf, um die Pfadzeichnung abzuschließen. Rufen Sie schließlich „Stroke“ auf, um den Umriss zu zeichnen (oder „Fill“, um den Pfad zu füllen). Das Folgende ist ein Beispiel:
//示例 context.beginPath(); //开始路径 context.moveTo(40, 40); //移动到点(40,40) context.lineTo(300, 40); //画线到点(300,30) context.lineTo(40, 300); //画线到点(40,300) context.closePath(); //结束路径 context.stroke(); //绘制轮廓 //或者填充用context.fill();
2.2.3 Kreis
Canvas verfügt eigentlich nicht über eine spezielle Methode zum Zeichnen eines Kreises. Sie können einen Kreis simulieren, indem Sie einen Bogen zeichnen. Da ein Bogen ein Pfad ist, sollte die API zum Zeichnen von Bögen zwischen beginPath und closePath eingefügt werden.
2.3 Stil
2.3.1 Linienfarbe ändern
var color; //指定RGB值 color = "rgb(255, 0, 0)"; //指定RGBA值（最后一个参数为alpha值，取值0.0~1.0） color = "rgba(255, 0, 0, 1)"; //指定16进制码 color = "#FF0000"; //用单词指定 color = "red"; //设置填充颜色 context.fillStyle = color; //设置边框颜色 context.strokeStyle = color;
2.3.2 Linienbreite ändern
//指定线宽值 var value= 3; //设置边框颜色 context.linewidth = value;
2.4 Text zeichnen
//Angeben Schriftstil
context.font = "italic 30px fett";
//Zeichne Text an Punkt (40,40)
context.fillText("Hallo Welt! " , 40, 40);
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
So zählen Sie die Anzahl der Tabellensummen im Bootstrap
So verwenden Sie JS zum Deaktivieren und Aktivieren von Schaltflächen
Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Grafiken mit der CanvasAPI von H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
