suchen
HeimWeb-FrontendH5-TutorialDetaillierte Erläuterung des Beispielcodes der HTML5-Canvas-Zeichnung (3)

In diesem Artikel geht es hauptsächlich um die Anwendung der Füllfunktion von Grafiken in HTML5 Leinwand, hauptsächlich einschließlich grundlegender Farbdefinition (Grundfarben), Farbverlauf (Gradient) und Muster , Shadow;

Veröffentlichen Sie zunächst ein grundlegendes Codesegment, das Folgendes implementiert:

Base Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}

function eventWindowLoaded() {
canvasApp();
}

function canvasSupport() {
return Modernizr.canvas;
}

function canvasApp() {
//是否支持CANVAS判断
if(!canvasSupport()) {
return;
}
//取Canvasvar
theCanvas = document.getElementById("canvasOne");
//获取绘图环境context
var context = theCanvas.getContext("2d");
//绘图方法的实现
function drawScreen() {}
//绘图方法调用执行
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px; border:1px solid #0000ff">
<canvas id="canvasOne" width="550" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

Ersetzen Sie für alle folgenden Beispielcodes einfach die obige Funktion drawScreen()!

Grundfarben Grundfarben

html5 Die Farben, die die Verwendung von String zum Ersetzen von RGB-Werten unterstützen, sind hauptsächlich Grundfarben:

Schwarz = #000000 Grün = #008000 Silber = #C0C0C0 Limette=#00FF00
Grau = #808080 Oliv = # 80800 0                                                                              = #FF0000 blau = #0000FF
lila = #800080 blaugrün = #008080 fuchsia = # FF00FF aqua = #00FFFF
Zum Beispiel: context.fillStyle="#000000" oder context.fillStyle="; black"; context.
StrokeStyle

="#COCOCO"; oder context.StrokeStyle="silver";

Verlauf

Es gibt zwei Haupttypen von Verläufen:

Linear Verläufe, radiale Verläufe

Lineare Verläufe umfassen lineare horizontale Verläufe, vertikale Verläufe und diagonale Verläufe ;

Instanzeffekt:

水平渐变(Linear horizontal gradient)

function drawScreen()
{
var linearGradient=context.createLinearGradient(0,0,60,0);
linearGradient.addColorStop(0,&#39;rgb(255,0,0)&#39;);
linearGradient.addColorStop(0.5,&#39;rgb(0,255,0)&#39;);
linearGradient.addColorStop(1,&#39;rgb(0,0,255)&#39;);

context.fillStyle=linearGradient; 
context.fillRect(0, 0,30,40);
context.fillRect(0, 40,60,40);
context.fillRect(0, 80,90,40);
context.fillRect(0, 120,120,40);
context.fillRect(25, 160,150,40);
}

context.createLinearGradient(x1,y1,x2,y2)

Diese Methode wird verwendet, um einen LinienverlaufObjekt zu erstellen, einschließlich vier Parametern : Die Koordinaten des Gradientenstartpunkts (x1, y1), die Koordinaten des Gradientenendpunkts (x2, y2);

在上在例子中,.createLinearGradient(0,0,100,0);两个点的Y坐标都是0,表示是水平渐变;

若是.createLinearGradient(0,0,0,100);两个点的X坐标都是0,Y坐标在发生变化,则表示为垂直渐变;

若是.createLinearGradient(0,0,100,100);同表示对角线线向渐变;

.addColorStop(position,'rgb')该方法是为渐变添加颜色;包括二个参数:代表颜色要使用的位置(position),第二个代表颜色的rgb值;

其中,position值的范围是[0.0---1.0],我们可以理解为定义的渐变范围的一个百分比表示;

context.fillStyle用来设置填充颜色或者渐变风格;

Linear gradient渐变也可用于描边时使用,设置线框的风格即可:strokeStyle 

水平渐变 边框

function drawScreen() {
var linearGradient = context.createLinearGradient(0, 0, 60, 0);
linearGradient.addColorStop(0,&#39;rgb(255,0,0)&#39;);
linearGradient.addColorStop(.5,&#39;rgb(0,255,0)&#39;);
linearGradient.addColorStop(1,&#39;rgb(0,0,255)&#39;);
context.strokeStyle = linearGradient;
context.strokeRect(0, 0,60,60);
}

径向渐变Radial gradients

径向渐变能过contect.createRadialGradient(x1,y1,radius1,x2,y2,radius2)来创建;

包括6个参数:两个圆的参数,第一个圆的圆心(x1,y1),半径radius1;第二个圆的圆心(x2,y2),半径radius2;

Radial gradients

function drawScreen() {
var radialGradient = context.createRadialGradient(70, 70, 10,100,100,70);
radialGradient.addColorStop(0,&#39;rgb(255,0,0)&#39;);
radialGradient.addColorStop(.5,&#39;rgb(0,255,0)&#39;);
radialGradient.addColorStop(1,&#39;rgb(0,0,255)&#39;);
context.fillStyle = radialGradient;
context.fillRect(0, 0,200,200);
}

实例效果:

创建radial gradient渐变时,两个圆点也可以相同,大家自己试试效果。。嘿嘿!

radial gradient渐变也可用于描边时使用,设置线框的风格即可:strokeStyle


Pattern 图案

用图案填充形状,就是用图片来填充图形;

通过context.createPattern(image,repeat)来实现,两个参数,分别代表:图片实例、第二个是个字符串类型的,指是否重复;

repeat主要包含四个选项:repeat、repeat-x、repeat-y、no-repeat 

Pattern

function drawScreen() {
var fillImg = new Image();
fillImg.src = &#39;pattern.png&#39;;
fillImg.onload = function(){
var fillPattern = context.createPattern(fillImg,&#39;repeat&#39;);
context.fillStyle = fillPattern;
context.fillRect(0,0,500,200);
}
}

实例效果(实例中包含的一上图片”pattern.png“):

其它的重复效果,大家自己试试,嘿嘿…………

 

Shadow投影效果

给图形添加投影效果。先看看实例吧;

Shadow

function drawScreen() {
context.fillStyle = &#39;red&#39;;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = &#39;black&#39;;
context.shadowBlur = 10;
context.fillRect(10,10,400,100);
}

Shadow主要用于四个属性

context.shadowOffsetX :代表投影在X方向的偏移量,向正负分别代表,向右向左;大小代表偏移值;

context.shadowOffsetY :代表投影在Y方向的偏移量,向正负分别代表,向下向上;大小代表偏移值;

context.shadowBlur :代表投影模糊效果的大小

context.shadowColor:代表投影的颜色,rgb值("black"\"#000000"\"rgb(0,0,0)");

 

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes der HTML5-Canvas-Zeichnung (3). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
H5: Wie es die Benutzererfahrung im Web verbessertH5: Wie es die Benutzererfahrung im Web verbessertApr 19, 2025 am 12:08 AM

H5 verbessert die Erfahrung des Webbenutzers mit Multimedia -Support, Offline -Speicher und Leistungsoptimierung. 1) Multimedia -Unterstützung: H5 und Elemente vereinfachen die Entwicklung und verbessern die Benutzererfahrung. 2) Offline -Speicher: Webstorage und IndexedDB ermöglichen die Verstärkung der Erfahrung offline. 3) Leistungsoptimierung: Webworker und Elemente optimieren die Leistung, um den Bandbreitenverbrauch zu verringern.

Dekonstruieren von H5 -Code: Tags, Elemente und AttributeDekonstruieren von H5 -Code: Tags, Elemente und AttributeApr 18, 2025 am 12:06 AM

Der HTML5 -Code besteht aus Tags, Elementen und Attributen: 1. Das Tag definiert den Inhaltstyp und ist von Winkelklammern umgeben, wie z. 2. Elemente bestehen aus Start -Tags, Inhalten und End -Tags wie Inhalten. 3. Attribute definieren Schlüsselwertpaare im Start-Tag und verbessern Funktionen, z. B.. Dies sind die grundlegenden Einheiten zum Aufbau von Webstruktur.

H5 -Code verstehen: Die Grundlagen von HTML5H5 -Code verstehen: Die Grundlagen von HTML5Apr 17, 2025 am 12:08 AM

HTML5 ist eine Schlüsseltechnologie zum Aufbau moderner Webseiten und bietet viele neue Elemente und Funktionen. 1. HTML5 führt semantische Elemente wie usw. ein, die die Webseitenstruktur und die SEO verbessern. 2. Support Multimedia-Elemente und Einbetten von Medien ohne Plug-Ins. 3. Formulare verbessern neue Eingangstypen und Überprüfungseigenschaften und vereinfachen Sie den Überprüfungsprozess. 4. Bieten Sie Offline- und lokale Speicherfunktionen an, um die Leistung der Webseiten und die Benutzererfahrung zu verbessern.

H5 -Code: Best Practices für WebentwicklerH5 -Code: Best Practices für WebentwicklerApr 16, 2025 am 12:14 AM

Zu den Best Practices für den H5 -Code gehören: 1. Verwenden Sie korrekte DocType -Deklarationen und Zeichenkodierung; 2. Verwenden Sie semantische Tags; 3.. HTTP -Anfragen reduzieren; 4. Verwenden Sie asynchrone Laden; 5. Bilder optimieren. Diese Praktiken können die Effizienz, Wartbarkeit und Benutzererfahrung von Webseiten verbessern.

H5: Die Entwicklung von Webstandards und TechnologienH5: Die Entwicklung von Webstandards und TechnologienApr 15, 2025 am 12:12 AM

Webstandards und -technologien haben sich bisher aus HTML4, CSS2 und einfachem JavaScript entwickelt und haben erhebliche Entwicklungen erfahren. 1) HTML5 führt APIs wie Leinwand und Webstorage ein, die die Komplexität und Interaktivität von Webanwendungen verbessern. 2) CSS3 fügt Animations- und Übergangsfunktionen hinzu, um die Seite effektiver zu gestalten. 3) JavaScript verbessert die Entwicklungseffizienz und die Lesbarkeit der Code durch moderne Syntax von Node.js und ES6, wie z. B. Pfeilfunktionen und Klassen. Diese Änderungen haben die Entwicklung von Leistungsoptimierung und Best Practices von Webanwendungen gefördert.

Ist H5 eine Abkürzung für HTML5? Erforschen der DetailsIst H5 eine Abkürzung für HTML5? Erforschen der DetailsApr 14, 2025 am 12:05 AM

H5 ist nicht nur die Abkürzung von HTML5, sondern auch ein breiteres Ökosystem der modernen Webentwicklungstechnologie: 1. H5 enthält HTML5, CSS3, JavaScript und verwandte APIs und Technologien; 2. Es bietet eine reichhaltigere, interaktive und reibungslose Benutzererfahrung und kann nahtlos auf mehreren Geräten ausgeführt werden. 3. Mit dem H5 -Technologie -Stack können Sie reaktionsschnelle Webseiten und komplexe interaktive Funktionen erstellen.

H5 und HTML5: häufig verwendete Begriffe in der WebentwicklungH5 und HTML5: häufig verwendete Begriffe in der WebentwicklungApr 13, 2025 am 12:01 AM

H5 und HTML5 beziehen sich auf dasselbe, nämlich HTML5. HTML5 ist die fünfte Version von HTML, die neue Funktionen wie semantische Tags, Multimedia -Support, Leinwand und Grafiken, Offline -Speicher und lokaler Speicher bietet, die Ausdrucksfähigkeit und Interaktivität von Webseiten verbessert.

Worauf bezieht sich H5? Erforschen des KontextesWorauf bezieht sich H5? Erforschen des KontextesApr 12, 2025 am 12:03 AM

H5REFERSTOHTML5, ApivotaltechnologyInwebdevelopment.1) HTML5IntroducesNewelementsandapisrich, Dynamicwebapplications.2) ITSUPP ortsmultimediaWitHoutPlugins, BETHINGINGUSEREXPERICERCROSSDEVICES.3) SEMANTICELEMENTSIMPROVEPENTENTENTENTRUCTENTRUCTELUREANDSEO.4) H5'SRespo

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.