Canvas-Lernreihe 1: Erste Einführung in Canvas
Sie haben vor kurzem begonnen, Canvas zu lernen, und ich habe vor, einige Notizen und Zusammenfassungen des gesamten Lernprozesses von Canvas aufzuzeichnen. Wenn es Mängel gibt, weisen Sie diese bitte darauf hin.
1. Einführung in Canvas
Die Entstehung des Canvas-Elements kann gesagt werden Um die Zeichenanimation der Web-Welt und die Tür zu Grafiken zu öffnen, ist ihre Funktion sehr leistungsfähig
Das Canvas-Element ist das leistungsstärkste Element in HTML5, und seine Fähigkeiten werden hauptsächlich durch den Kontext (Zeichnungskontext/ Zeichenumgebung) in Canvas, die vom Objekt angezeigt wird. Dieses Objekt wird von der Leinwand selbst erhalten.
var canvas = getElementById('canvas');var context = canvas.getContext('2d');
2. Sicherungsinhalt der Leinwand
Text, der zwischen Canvas-Elementen enthalten ist. Dieser Text wird als „Backup-Inhalt“ bezeichnet und wird nur angezeigt, wenn der Browser das Canvas-Element nicht unterstützt
<canvas>当前浏览器不支持canvas元素，请更换浏览器</canvas>
3. Leinwandgröße
Die Standardbreite des Leinwandelements beträgt 300 Pixel und die Höhe beträgt 150 Pixel.
Wir können die Größe der Leinwand über die Breiten- und Höhenattribute der Leinwand ändern. Wir können die Größe des Leinwandelements auch über CSS ändern. Es gibt jedoch einen Unterschied zwischen den beiden Modifikationen.
Leinwand hat tatsächlich zwei Größensätze:
Eine ist die Größe des Leinwandelements und die andere ist die Größe der Leinwand Zeichenfläche.
Wenn wir die Canvas-Attribute Breite und Höhe verwenden, ändern wir tatsächlich gleichzeitig die Größe des Elements und die Größe der Zeichenfläche
Beim Festlegen mit CSS wird die Größe des Canvas-Elements geändert, was keinen Einfluss auf die Größe der Zeichenfläche hat. Zu diesem Zeitpunkt skaliert der Browser die Zeichenfläche, was zu Effekten führt, die wir nicht haben Ich möchte
Die Leistung der Breiten- und Höhenattribute beim Ändern der Leinwandgröße erhalten
<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);</script>
Leistung bei Verwendung von CSS zum Ändern der Größe von Canvas-Elementen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas尺寸问题</title>
<style>#canvas {
margin: 0 auto;
padding: 0;
width: 600px;
height: 300px;
border: 1px solid #ccc;
}</style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);</script>
</body>
</html>
Wenn wir also die Größe des Canvas-Elements festlegen, ist es am besten, kein CSS zum Festlegen zu verwenden. Wir können es so einstellen
<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas，请更换浏览器</canvas>
oder
<script type="text/javascript">var canvas = document.getElementById('canvas');
canvas.width = '600'; //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = '300';</script>
4. canvas API
canvas元素并未提供很多API，它只提供了两个属性三个方法，而绘图功能的方法与属性全都是canvas的绘图环境（context）对象提供。
width：设置/获取canvas元素绘图表面的宽度，默认值为300。
height：设置/获取canvas元素绘图表面的高度，默认值为150。
getContext(): 返回canvas元素的绘图环境对象。
toDataURL(): 描述：返回一个data URI：会根据type指定的参数形式将canvas中的图片编码成一个UTF-16字符串的形式。
toBold(): 描述：创建Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由User Agent( 用户代理端 )自行决定。
toDataURL():
type 可选参数
图片格式，默认为 image/png
encoderOptions 可选参数
当图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。
如果超出取值范围，将会使用默认值 0.92，默认分辨率为96dpi。
这里值得注意：
如果canvas的高度或者宽度为0时，会返回字符串 "data:,"
如果传入的类型不是 "image/png", 但是返回的值以 "data: image/png"开头，说明传入的类型不支持
Chrome支持“image/webp”类型
尽管在默认情况下canvas对象是一副位图，但是并不是HTML中的img元素，所以我们可以利用toDataURL方法创建一幅表示canvas的图像;也可以利用此方法创建和操作缓冲canvas。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas尺寸问题</title>
<style>#canvas {
margin: 0 auto;
padding: 0;
display: none;
}</style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var dataImage = document.getElementById('dataImage');
canvas.width = '600'; //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = '300';var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);var dataUrl = canvas.toDataURL();
dataImage.src = dataUrl;</script>
</body>
</html>
toBold():
目前该方法只有Firefox与IE10浏览器支持
参考文章：
MDN Web 技术文档
Das obige ist der detaillierte Inhalt vonCanvas-Lernreihe 1: Erste Einführung in Canvas. 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
Die Attraktivität der C-Sprache enthüllen: Das Potenzial von Programmierern aufdecken
Feb 24, 2024 pm 11:21 PM
Der Reiz des Erlernens der C-Sprache: Das Potenzial von Programmierern freisetzen Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Computerprogrammierung zu einem Bereich geworden, der viel Aufmerksamkeit erregt hat. Unter vielen Programmiersprachen war die Sprache C schon immer bei Programmierern beliebt. Seine Einfachheit, Effizienz und breite Anwendung machen das Erlernen der C-Sprache für viele Menschen zum ersten Schritt, um in den Bereich der Programmierung einzusteigen. In diesem Artikel geht es um den Reiz des Erlernens der C-Sprache und darum, wie man das Potenzial von Programmierern durch das Erlernen der C-Sprache freisetzt. Der Reiz des Erlernens der C-Sprache liegt zunächst einmal in ihrer Einfachheit. Im Vergleich zu anderen Programmiersprachen C-Sprache
Vollständige Codenamen der Xiaomi 15-Serie enthüllt: Dada, Haotian, Xuanyuan
Aug 22, 2024 pm 06:47 PM
Die offizielle Veröffentlichung der Xiaomi Mi 15-Serie wird im Oktober erwartet, und die vollständigen Codenamen der Serie wurden in der MiCode-Codebasis ausländischer Medien veröffentlicht. Unter ihnen trägt das Flaggschiff Xiaomi Mi 15 Ultra den Codenamen „Xuanyuan“ (was „Xuanyuan“ bedeutet). Dieser Name stammt vom Gelben Kaiser in der chinesischen Mythologie, der Adel symbolisiert. Xiaomi 15 trägt den Codenamen „Dada“, während Xiaomi 15Pro den Namen „Haotian“ (was „Haotian“ bedeutet) trägt. Der interne Codename des Xiaomi Mi 15S Pro lautet „dijun“, was auf Kaiser Jun anspielt, den Schöpfergott von „The Classic of Mountains and Seas“. Abdeckungen der Xiaomi 15Ultra-Serie
Erste Schritte mit Pygame: Umfassendes Installations- und Konfigurations-Tutorial
Feb 19, 2024 pm 10:10 PM
Lernen Sie Pygame von Grund auf: Komplettes Installations- und Konfigurations-Tutorial, spezifische Codebeispiele erforderlich. Einführung: Pygame ist eine Open-Source-Spieleentwicklungsbibliothek, die mit der Programmiersprache Python entwickelt wurde. Sie bietet eine Fülle von Funktionen und Tools, mit denen Entwickler problemlos eine Vielzahl von Typen erstellen können des Spiels. Dieser Artikel hilft Ihnen, Pygame von Grund auf zu erlernen und bietet ein vollständiges Installations- und Konfigurations-Tutorial sowie spezifische Codebeispiele, um Ihnen einen schnellen Einstieg zu erleichtern. Teil eins: Python und Pygame installieren Stellen Sie zunächst sicher, dass Sie dies getan haben
Lassen Sie uns gemeinsam lernen, wie Sie die Stammzahl in Word eingeben
Mar 19, 2024 pm 08:52 PM
Beim Bearbeiten von Textinhalten in Word müssen Sie manchmal Formelsymbole eingeben. Manche Leute wissen nicht, wie man die Stammzahl in Word eingibt, also habe ich den Redakteur gebeten, mit meinen Freunden ein Tutorial zur Eingabe der Stammzahl in Word zu teilen. Ich hoffe, es hilft meinen Freunden. Öffnen Sie zunächst die Word-Software auf Ihrem Computer, öffnen Sie dann die Datei, die Sie bearbeiten möchten, und bewegen Sie den Cursor an die Stelle, an der Sie das Stammzeichen einfügen müssen, siehe Beispielbild unten. 2. Wählen Sie [Einfügen] und dann im Symbol [Formel]. Wie im roten Kreis im Bild unten gezeigt: 3. Wählen Sie dann unten [Neue Formel einfügen]. Wie im roten Kreis im Bild unten gezeigt: 4. Wählen Sie [Radikal] und dann das entsprechende Radikal. Wie im roten Kreis im Bild unten gezeigt:
Der beste Zeitpunkt, um die Huawei Mate 60-Serie, die neue KI-Eliminierung + Image-Upgrade zu kaufen und Herbstaktionen zu genießen
Aug 29, 2024 pm 03:33 PM
Seitdem die Huawei Mate60-Serie letztes Jahr in den Handel kam, nutze ich persönlich das Mate60Pro als mein Haupttelefon. In fast einem Jahr wurde das Huawei Mate60Pro mehreren OTA-Upgrades unterzogen und das Gesamterlebnis wurde erheblich verbessert, sodass die Menschen das Gefühl haben, immer neu zu sein. So hat beispielsweise die Huawei Mate60-Serie kürzlich noch einmal ein deutliches Upgrade der Bildgebungsfunktionen erhalten. Erstens die neue KI-Eliminierungsfunktion, die Passanten und Schmutz auf intelligente Weise eliminieren und leere Bereiche automatisch ausfüllen kann. Zweitens wurden die Farbgenauigkeit und die Teleschärfe der Hauptkamera erheblich verbessert. Angesichts der Schulanfangssaison hat die Huawei Mate60-Serie auch eine Herbstaktion gestartet: Beim Kauf des Telefons erhalten Sie einen Rabatt von bis zu 800 Yuan, der Startpreis liegt bei nur 4.999 Yuan. Häufig verwendete und oft neue Produkte mit großem Wert
Der Entwicklungstrend und die Zukunftsaussichten von Canvas im chinesischen Bildungssektor
Jan 17, 2024 am 10:22 AM
Mit der rasanten Entwicklung von Wissenschaft und Technologie und der weit verbreiteten Anwendung der Informationstechnologie im Bildungsbereich entwickelt sich Canvas als weltweit führendes Online-Lernmanagementsystem nach und nach in der chinesischen Bildungsbranche weiter. Das Aufkommen von Canvas bietet neue Möglichkeiten für die Reform der Bildung und Lehrmethoden in China. In diesem Artikel werden die Entwicklungstrends und -aussichten von Canvas im chinesischen Bildungssektor untersucht. Einer der Entwicklungstrends von Canvas im chinesischen Bildungssektor ist zunächst die tiefgreifende Integration. Mit der rasanten Entwicklung von Cloud Computing, Big Data und künstlicher Intelligenz wird Canvas immer mehr
Verstehen Sie diese 20 Dune-Analyse-Dashboards und erfassen Sie schnell Trends in der Kette
Mar 13, 2024 am 09:19 AM
Originalautor: Minty, Encryption KOL Originalzusammenstellung: Shenchao TechFlow Wenn Sie wissen, wie man es verwendet, ist Dune ein All-in-One-Alpha-Tool. Bringen Sie Ihre Forschung mit diesen 20 Dune-Dashboards auf die nächste Stufe. 1. TopHolder-Analyse Dieses einfache, von @dcfpascal entwickelte Tool kann Token anhand von Indikatoren wie der monatlichen Aktivität der Inhaber, der Anzahl der einzelnen Inhaber und der Gewinn- und Verlustquote der Brieftasche analysieren. Besuchen Sie den Link: https://dune.com/dcfpascal/token-holders2. Token-Übersichtsmetriken @andrewhong5297 hat dieses Dashboard erstellt, das eine Möglichkeit bietet, Token durch die Analyse von Benutzeraktionen zu bewerten
Lernen Sie die Hauptfunktion der Go-Sprache von Grund auf kennen
Mar 27, 2024 pm 05:03 PM
Titel: Lernen Sie die Hauptfunktionen der Go-Sprache von Grund auf. Als einfache und effiziente Programmiersprache wird die Go-Sprache von Entwicklern bevorzugt. In der Go-Sprache ist die Hauptfunktion eine Einstiegsfunktion, und jedes Go-Programm muss die Hauptfunktion als Einstiegspunkt des Programms enthalten. In diesem Artikel wird erläutert, wie Sie die Hauptfunktion der Go-Sprache von Grund auf erlernen, und es werden spezifische Codebeispiele bereitgestellt. 1. Zuerst müssen wir die Go-Sprachentwicklungsumgebung installieren. Sie können zur offiziellen Website (https://golang.org) gehen
