canvas 设置透明度

2018-10-14 23:43| 作者: admin| 查看: 6275| 评论: 0|来自: 蚂蚁部落

通过CSS设置元素透明度非常简单,方式也很多。

比如最为典型的一个方式是利用RGBA颜色值来实现。

代码片段如下:

[CSS] 纯文本查看 复制代码
background-color:rgba(125,255,158,0.5);

前三个参数设置背景颜色,最后一个参数0.5用来设置透明度。

最后一个参数值介于0-1之间,0表示完全透明,1表示完全不透明。

更多CSS设置透明度方式可以参阅CSS 设置透明度一章节。

canvas设置透明度可以采用RGBA颜色表示法,也可以采用其他颜色表示法,比如HSLA等。

下面仅以RGBA颜色表示法为例,首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  
  //设置矩形的透明度
  ctx.fillStyle = "rgba(100, 40, 40, 0.3)";
  ctx.fillRect(10, 10, 100, 50);

  //设置线条的透明度
  ctx.beginPath();
  ctx.strokeStyle = "rgba(100, 40, 40, 0.3)";
  ctx.moveTo(70, 80);
  ctx.lineTo(160, 70);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="450"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/14/234420snvjzb99ww340hdq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码绘制了一个矩形和斜线,并分别设置了它们的透明度。

通过fillStyle和strokeStyle分别填充矩形和描边斜线,都是RGBA颜色值。

上述代码是分别设置填充和描边透明度,绘制少数图片还可以接受。

但是如果要绘制大量图片,将是非常繁琐的操作,所以需要寻求一种能够统一设置透明度的方式。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  
  //无透明度红色矩形
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 100, 50);
  
  ctx.globalAlpha = "0.3";
  // 绿色矩形
  ctx.fillStyle = "green";
  ctx.fillRect(10, 70, 100, 50);
  // 蓝色矩形
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 130, 100, 50);
  
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="450"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/14/234445seaws8ybyyazuzeq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).globalAlpha可以设置全局透明度,它的名字也体现了这一点。

(2).此属性只对它后面的路径产生作用。

关于beginPath方法可以参阅canvas beginPath()一章节。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");

  ctx.globalAlpha = "0.2";
  //设置矩形的透明度
  ctx.fillStyle = "rgba(100, 40, 40, 0.9)";
  ctx.fillRect(10, 10, 100, 50);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="450"></canvas>
</body>
</html>

上述代码同时设置了颜色的透明度和全局透明度。

这个时候会进行叠加处理,也就是最终透明度是0.2*0.9。


鲜花

握手

雷人

路过

鸡蛋
返回顶部