Canvas globalAlpha绘出透明图形

HTML5 Canvas绘制示例

最新推荐文章于 2025-05-09 07:39:57 发布

原创最新推荐文章于 2025-05-09 07:39:57 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#border #图形

html5 canvas 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas API进行图形绘制的例子。通过设置不同的填充颜色和透明度，该示例展示了如何在画布上绘制四个彩色矩形以及一系列叠加的圆形。

<!doctype html>
<html>
<canvas width=300px height=300px id="mycanvas" style="border:3px solid #ff00ff"></canvas>
<script>
	var mycanvas = document.getElementById("mycanvas");
	var context = mycanvas.getContext("2d");
	
	context.fillStyle = "#ff0";
	context.fillRect(0,0,150,150);
	context.fillStyle = "#0f0";
	context.fillRect(150,0,150,150);
	context.fillStyle = "blue";
	context.fillRect(0,150,150,150);
	context.fillStyle = "red";
	context.fillRect(150,150,150,150);
	
	//context.beginPath();
	//context.strokeStyle = "#fff";
	context.fillStyle = "#fff";
	context.globalAlpha = 0.2;
	for(var i=0;i<15;i++)
	{
		context.beginPath();
		context.arc(150,150,10+10*i,0,2*Math.PI,true);
		//context.stroke();
		context.fill();
	}
	//context.stroke();
</script>  
</html>

效果图如下