Javascript实现Canvas绘图 —— 2D绘图之填充、描边及绘制矩形

Canvas绘图的实现：

        <canvas>元素负责在页面中设定一个区域，通过JS动态地在这个区域中绘制图形。

IE9+、Firefox1.5+、Safari2+、Opera9+、Chrome、IOS版Safari以及Android版WebKit都在一定程度上支持<canvas>元素。

1、基本用法

（1）HTML部分的代码

1 /* width和height属性，指定绘图的区域的大小 */
2 <canvas id="picture" width="200" height="200">
3 /* 标签之间的内容在浏览器不支持<canvas>元素时显示 */
4     A picture about apple.
5 </canvas>

<canvas>元素对应的DOM元素也有width和height属性，可随意修改。

可以通过CSS添加样式，如果不添加任何样式或不绘制任何图形，在页面上是看不到该元素的。

（2）JS部分的代码

1 var picture = document.getElementById("picture");