Canvas globalAlpha绘出透明图形

最新推荐文章于 2024-03-19 13:55:37 发布

boia

最新推荐文章于 2024-03-19 13:55:37 发布

阅读量3.1k

点赞数 1

分类专栏： html5 canvas 文章标签： border 图形

本文链接：https://blog.csdn.net/boiaprogramfan0420/article/details/7471456

版权

html5 canvas 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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>

效果图如下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

boia

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas globalAlpha绘出透明图形

var mycanvas = document.getElementById("mycanvas"); var context = mycanvas.getContext("2d"); context.fillStyle = "#ff0"; context.fillRect(0,0,150,150); context.fillStyle = "#0f0"; context.fillR
复制链接

扫一扫