<body onload="draw();">
<!--
canvas不设置宽高时，默认width:300px,height:150px;
canvas提供了三种方法绘制矩形
fillRect(x,y,width,height) 绘制一个填充的矩形
strokeRect(x,y,width,height) 绘制一个矩形的边框
clearRect(x,y,width,height) 清除指定矩形区域，让清除部分完全透明
x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）
的坐标。width和height设置矩形的尺寸。
-->
<canvas id="area" width="400px" height="300px"></canvas>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById("area");
//get.Context()方法用来渲染上下文和它的绘画功能，只有一个参数
if(canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgba(200,0,0)";
ctx.fillRect(10,10,55,50);
ctx.fillStyle = "rgba(0,0,200,0.5)";
ctx.fillRect (30,30,55,50);
ctx.fillStyle = "rgba(0,200,0)";
ctx.fillRect(100,100,50,50);
}
}
</script>
</body>
如图
1.jpg
网友评论