canvas透明度的矩形效果

2018-3-22 11:37| 发布者: admin| 查看: 1154| 评论: 0|来自: 蚂蚁部落

本章节介绍一下如何利用canvas绘制一个矩形,带有背景颜色,并且具有一定的透明度效果。

关于透明度可以参阅canvas 设置透明度详解一章节。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" charset="utf-8"> 
//这个函数将在页面完全加载后调用 
function pageLoaded(){ 
  //获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同 
  var canvas = document.getElementById('tCanvas'); 
  //获取该canvas的2D绘图环境 
  var context = canvas.getContext('2d'); 
  //绘制代码将出现在这里 
  //设置填充颜色为红色 
  context.fillStyle = "red"; 
  //画一个红色的实心矩形 
  context.fillRect(50,50,100,40); 
  //设置边线颜色为绿色 
  context.fillStyle = "green"; 
  //画一个绿色空心矩形 
  context.strokeRect(120,100,100,35); 
  //使用rgb()设置填充颜色为蓝色 
  context.fillStyle = "rgb(0,0,255)"; 
  //画一个蓝色的实心矩形 
  context.fillRect(80,230,100,40); 
  //设置填充色为黑色且alpha值(透明度)为0.2 
  context.fillStyle = "rgba(0,0,0,0.2)"; 
  //画一个透明的黑色实心矩形 
  context.fillRect(300,180,100,50); 
} 
window.onload=function(){
  pageLoaded();
}
</script> 
</head> 
<body> 
<canvas width="400" height="400" id="tCanvas">浏览器不支持</canvas> 
</body> 
</html>

更多canvas教程可以参阅canvas教程版块。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部