<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Html5游戏开发学习1-Canvas</title>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="broder:black 1px solid;">
浏览器不支持HTML5 canvas
</canvas>
<script type="text/javascript" charset="utf-8">
//获取canvas对象的引用
var canvas = document.getElementById('canvas');
//获取canvas的2d绘图环境
var context = canvas.getContext('2d');
//绘制具有颜色和透明度的矩形
context.fillStyle = "red";
//画一个红色的矩形
context.fillRect(310,160,100,50);
//设置边线颜色为绿色
context.strokeStyle = "green";
//画一个绿色的空心矩形
context.strokeRect(310,240,100,50);
//使用rgb设置填充颜色为红色
context.fillStyle = "rgb(255,0,0)";
//画一个红色的实心矩形
context.fillRect(420,160,100,50);
//设置填充颜色为绿色，并且alpha值为0.6
context.fillStyle="rgba(0,255,0,0.6)";
//画一个半透明的绿色实心矩形
context.fillRect(450,180,100,50);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<me
阅读背景：
HTML5快速入门实例（三）Canvas自定义画笔样式
来源：互联网
分享到：
