Ausführliche Erklärung zum Festlegen von Farbe und Transparenz beim Zeichnen von HTML5 Canvas_html5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Heim

Web-Frontend

H5-Tutorial

Ausführliche Erklärung zum Festlegen von Farbe und Transparenz beim Zeichnen von HTML5 Canvas_html5-Tutorial-Fähigkeiten

May 16, 2016 pm 03:45 PM

canvas html5 透明度颜色

Farbe angeben

Schwarz ist die Standardfarbe für Canvas-Zeichnungen. Wenn Sie sie in eine andere Farbe ändern möchten, müssen Sie die Farbe vor dem eigentlichen Zeichnen angeben.

JavaScript-CodeInhalt in die Zwischenablage kopieren

ctx.StrokeStyle = Farbe

Geben Sie die Farbe der gezeichneten Linie an:

JavaScript-CodeInhalt in die Zwischenablage kopieren

ctx.fillStyle = color

Geben Sie die Farbe der Füllung an:
Sehen wir uns ein praktisches Beispiel an:

JavaScript

JavaScript-CodeInhalt in die Zwischenablage kopieren

onload = function() {
draw();
};
Funktion draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false ; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgb(192, 80, 77)'; // Rot
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(155, 187, 89)'; // Grün
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(128, 100, 162)'; // Lila
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}

Der Effekt ist wie folgt:
2016325112217008.png (142×142)

Transparenz angeben

Genau wie bei gewöhnlichem CSS können wir bei der Angabe der Farbe auch einen Alpha-Wert angeben (dieser wird jedoch nicht häufig verwendet und wurde vor IE9 nicht unterstützt). Schauen Sie sich den Code an:

JavaScript

JavaScript-CodeInhalt in die Zwischenablage kopieren

onload = function() {
draw();
};
Funktion draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false ; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; //
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(155, 187, 89, 0.7)'; //
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(128, 100, 162, 0.7)'; //
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}

结果就是下面这样：
2016325112248089.png (142×142)

和上面的代码基本没变化，就是把rgb(r, g, b)变成了rgba(r, g, b, a)而已，a的值也是0~1，0表示完全透明1则是完全不透明（所以alpha的值实际上是“不透明度“）.

全局透明globalAlpha
这个也是很简单的一个属性,默认值为1.0,代表完全不透明,取值范围是0.0（完全透明）~1.0。这个属性与阴影设置是一样的, 如果不想针对全局设置不透明度, 就得在下次绘制前重置globalAlpha.

总结一下：基于状态的属性有哪些？

——globalAlpha

——globalCompositeOpeartion

——StrokeStyle

——textAlign,textBaseline

——lineCap,lineJoin,lineWidth,miterLimit

——fillStyle

——Schriftart

——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY
我们通过一个代码,来体验一下globalAlpha的神奇之处~

JavaScript-Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全局透明</title>
<style>
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</div>
<script>
window.onload = Funktion(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
context.globalAlpha = 0.5;
for(var i=0; i<=50; i ){
var R = Math.floor(Math.random() * 255);
var G = Math.floor(Math.random() * 255);
var B = Math.floor(Math.random() * 255);
context.fillStyle = "rgb(" R "," G " ," B ")";
context.beginPath();
context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);
context.fill();
}
};
</script>
</body>
</html>

运行结果：
2016325112320763.jpg (850×500)

是不是非常的酷？终于有点艺术家的范儿了吧.

Erklärung dieser Website

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