HTML5 Canvas实战
2.5 绘制透明图形
阅读(

路径和文本

图形及组合

绘制矩形

绘制圆形

使用自定义图形和填充样式

玩转贝塞尔曲线:绘制云朵

绘制透明图形

对于需要图形分层的应用,经常需要处理透明度。本节,我们将学习如何使用全局透明度设置图形的透明度。

绘制透明图形
图2-5 绘制透明图形

绘制步骤

按照以下步骤,在一个不透明的矩形之上,绘制一个透明的圆:

1. 定义2D画布上下文:

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

2. 绘制矩形:

  //绘制矩形
  context.beginPath();
  context.rect(240,  30,  130,  130); context.fillStyle  = "blue";
  context.fill();

3. 使用globalAlpha属性设置画布的全局透明度,并绘制圆:

  //绘制圆
  context.globalAlpha  =  0.5;  //设置全局透明度context.beginPath();
  context.arc(359,  150,  70,  0,  2  * Math.PI, false); 
  context.fillStyle  = "red";
  context.fill();
};

4. 在HTML文档的body部分嵌入canvas标签:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要使用HTML5的画布API设置图形的透明度,我们可以用globalAlpha属性:

context.globalAlpha=[value]

globalAlpha属性接受0到1之间的任意实数。我们可以设置globalAlpha为1,使图形完全不透明,设置globalAlpha为0,使图形完全透明。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验