HTML5Canvas

<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。 

在画布上（canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

什么是 canvas

html5<canvas>元素用于图形的绘制，通过脚本 (通常是javascript)来完成. 

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 

你可以通过多种方法使用canva绘制路径,盒、圆、字符以及添加图像。

支持

表格中的数字表示支持 <canvas> 元素的第一个浏览器版本号。

创建一个画布（canvas）

一个画布在网页中是一个矩形框，通过 <canvas>元素来绘制. 

注意: 默认情况下 <canvas> 元素没有边框和内容。 

<canvas>简单实例如下:

<canvas id="mycanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小. 

提示:你可以在html页面中使用多个 <canvas> 元素. 

使用 style 属性来添加边框:

<canvas id="mycanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

使用 javascript 来绘制图像

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

var c=document.getelementbyid("mycanvas");
var ctx=c.getcontext("2d");
ctx.fillstyle="#ff0000";
ctx.fillrect(0,0,150,75);

实例解析: 

首先，找到 元素:

var c=document.getelementbyid("mycanvas");

然后，创建 context 对象：

var ctx=c.getcontext("2d");

getcontext(“2d”) 对象是内建的 html5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 

下面的两行代码绘制一个红色的矩形：

ctx.fillstyle="#ff0000";
ctx.fillrect(0,0,150,75);

设置fillstyle属性可以是css颜色，渐变，或图案。fillstyle 默认设置是#000000（黑色）。 

fillrect(x,y,width,height) 方法定义了矩形当前的填充方式。

canvas 坐标

canvas 是一个二维网格。 

canvas 的左上角坐标为 (0,0) 

上面的 fillrect 方法拥有参数 (0,0,150,75)。 

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。 

坐标实例 

如下图所示，画布的 x 和 y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。