html中canvas HTML canvas globalAlpha 属性

html中canvas

HTML5 中的 canvas 元素是一个可以使用脚本（通常是JavaScript）来绘制图形的 HTML 元素。它可以用于绘制图形、制作图像动画以及实现游戏开发。

<canvas id="myCanvas" width="200" height="100"></canvas>

上面的代码定义了一个名为 myCanvas 的 canvas 元素，宽度为 200px，高度为 100px。在 canvas 中，你可以使用 JavaScript 来绘制图形，例如圆形、椭圆、直线、多边形和路径。你还可以使用 JavaScript 来添加文本、图像和其他内容。

此外，你还可以使用 canvas 来创建动态效果，例如动态背景、时钟或其他动态效果。你还可以使用 canvas 来创建复杂的图形，例如 3D 图形或其他复杂的图形。

此外，canvas 还可以用于开发游戏。你可以使用 canvas 来创建 2D 或 3D 的游戏地图、人物、物体和其他内容。你还可以使用 canvas 来创建动态效果，例如水波浪动效果、雪花飘落效果或其他动态效果。

HTML canvas globalAlpha 属性

HTML canvas 参考手册

实例

首先，绘制一个红色的矩形，然后将透明度 (globalAlpha) 设置为 0.5，然后再绘制一个蓝色和一个绿色的矩形：

YourbrowserdoesnotsupporttheHTML5canvastag. var c=document.getElementById("myCanvas"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(20,20,75,50); ctx.globalAlpha=0.2; ctx.fillStyle="blue"; ctx.fillRect(50,50,75,50); ctx.fillStyle="green"; ctx.fillRect(80,80,75,50); }

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// Turn transparency on
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);