实例1:如何通过 canvas 元素来显示一个红色的矩形
HTML:
<canvas id="myCanvas"></canvas>
JS:
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
绘画API
坐标
实例1中的的 fillRect(0,0,80,100)
方法拥有参数(0,0,80,100)
意思是:在画布上绘制 80x100 的矩形,从左上角开始 (0,0)
fillRect (x,y,width,height)
简介
Canvas是为了客户端矢量图形而设计的。它自己没有绘图能力,所有的绘制工作必须使用 JavaScript 来完成,使用JS把想绘制的东西都绘制到一块画布上。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
<canvas> 的历史
<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
<canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进,目前 <canvas> 已经成为 HTML 5 草案中一个正式的标签。 参见:http://www.whatwg.org/specs/web-apps/current-work/