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>