HTML5实例教程:canvas标签绘制矩形实例代码
http://www.itjxue.com 2015-08-05 23:40 来源:未知 点击次数:
<!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>