HTML5实例教程:canvas标签绘制矩形实例代码

2012-11-14 00:14:26  来源:网页教学网 

网页制作Webjx文章简介:html5-canvas标签--绘制矩形。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>html5-canvas标签--绘制矩形</title>
</head>
<body>
<canvas id="1" width="200" height="200"></canvas>

<script type="text/javascript">
window.onload = function(){
var canva =document.getElementById('1')
var content =canva.getContext('2d')
content.fillStyle = "#ccc";//填充canvas的背景颜色
content.fillRect(0, 0, 200, 200);//参数分别表示 x轴,y轴,宽度,高度
content.lineWidth = 4;//边框宽度
content.strokeStyle = "#fff";//边框颜色
content.strokeRect(50,50,100,100);//边框坐标及大小
content.fillStyle = "#f00";//矩形填充颜色
content.fillRect(50,50,100,100);//矩形坐标及大小
}

</script>
</body>
</html>
更多