Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Beispielcodes der HTML5-Canvas-Zeichnung (3)

Detaillierte Erläuterung des Beispielcodes der HTML5-Canvas-Zeichnung (3)

黄舟Original: 2017-03-28 15:40:451214Durchsuche

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

Vorheriger Artikel：Detaillierte Erläuterung des Beispielcodes der HTML5-Canvas-Zeichnung (2)Nächster Artikel：Detaillierte Erläuterung des Beispielcodes der HTML5-Canvas-Zeichnung (2)

In Verbindung stehende Artikel

Mehr sehen