HTML5 Canvas

HTML 5 的 canvas元素使用JavaScript在网页上绘制图形。

画布是一个矩形区域，您可以控制其每一像素。

canvas拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。

canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成。

 

向HTML5页面添加canvas元素：<canvas id="myCanvas" width="200" height="100"></canvas>

通过JavaScript来绘制图形：

<script type="text/javascript">

var c = document.getElementById("myCanvas");//使用id来寻找canvas元素

var cxt = c.getContext("2d");//getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。

cxt.fillStyle = "#FF0000";//fillStyle方法将其染成红色

cxt.fillRect(0,0,150,75);//fillRect方法规定了形状，位置和尺寸。（0,0）表示开始坐标，150是宽度，75是高度

</script>