canvas透明度的矩形效果
分类：实例代码
canvas透明度的矩形效果属于前端实例代码，有关更多实例代码大家可以查看。
本章节介绍一下利用canvas绘制一个矩形，并且具有一定的透明度效果。
关于透明度可以参阅canvas设置透明度一章节。
代码实例如下:
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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教程版块。
canvas透明度的矩形效果，这样的场景在实际项目中还是用的比较多的，关于canvas透明度的矩形效果就介绍到这了。