Canvas globalAlpha绘出透明图形

墨蓝 2022-06-13 12:58 202阅读 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>

效果图如下

![1334672497_1197.png][]

[1334672497_1197.png]: https://img-my.csdn.net/uploads/201204/17/1334672497_1197.png

发表评论取消回复

表情：

评论列表（有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas图形编辑器

原文地址：[http://jeffzhong.space/2017/11/02/drawboard/][http_jeffzhong.space_2017_11_02_dr

- 日理万妓/ 2023年06月11日 06:28/ 0 赞/ 25 阅读

相关 Qt自绘系列-透明时钟

> 使用QPainter画透明时钟。上手难度：⭐️⭐️⭐️ 1. 演示 ![在这里插入图片描述][2021010214461963.gif] 2. 实现

分手后的思念是犯贱/ 2022年12月29日 01:41/ 0 赞/ 234 阅读

相关 canvas图形绘制：矩形，路径

1，canvas绘制矩形：实心矩形，边框矩形，擦除矩形 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年11月14日 15:58/ 0 赞/ 311 阅读

相关纯前端canvas手绘海报

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

蔚落/ 2022年11月11日 05:50/ 0 赞/ 189 阅读

相关 Android绘图技术详解，带你轻松绘出各种图形

转载地址：http://blog.csdn.net/leejizhou/article/details/51524948\rd 【[Android][]

傷城~/ 2022年08月23日 00:30/ 0 赞/ 152 阅读

相关 Android canvas.drawBitmap实现透明效果

以下是针对,‍canvas.drawBitmap方法实施透明效果. Paint paint = new Paint(); paint.setAlpha(0

- 日理万妓/ 2022年08月14日 00:51/ 0 赞/ 648 阅读

相关 Canvas globalAlpha绘出透明图形

<!doctype html> <html> <canvas width=300px height=300px id="mycanvas" style=

墨蓝/ 2022年06月13日 12:58/ 0 赞/ 203 阅读

相关 canvas中globalAlpha无效的问题

canvas中的globalAlpha属性用来设置全局的透明度，但是下面的代码显示出来的确有一个元素（圆圈）的透明度没有改变，如图 var ctx = canvas.

我就是我/ 2022年02月17日 01:23/ 0 赞/ 259 阅读

相关 Canvas—图形画刷

`createPattern`可以创建一个画刷模式，进而可以设置到`fillStyle`里，进行画刷的填充。函数原型：`ctx.createPattern(image

小咪咪/ 2021年12月14日 23:53/ 0 赞/ 412 阅读

相关使用canvas画图，图形模糊怎么办

在说解决办法之前，例行惯例，简要的说明一下Html5中的Canvas。Canvas是Html5制图中常用的元素，但其本身并没有绘制能力，它仅仅是图形的容器，要制图还必须依靠脚本

红太狼/ 2021年09月17日 02:20/ 0 赞/ 646 阅读