比如在画布上（Canvas）画一个赤色矩形，渐变矩形，彩色矩形，和一些彩色的笔墨。
什么是 canvas?
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (常日是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须利用脚本来绘制图形。
你可以通过多种方法利用 canvas 绘制路径,盒、圆、字符以及添加图像。
iphone
创建一个画布（Canvas）
一个画布在网页中是一个矩形框，通过 <canvas> 元向来绘制。
把稳: 默认情形下 <canvas> 元素没有边框和内容。
<canvas>大略实例如下:
<canvas id=\"大众myCanvas\"大众 width=\"大众200\公众 height=\公众100\公众></canvas>
把稳: 标签常日须要指定一个id属性 (脚本中常常引用), width 和 height 属性定义的画布的大小。
提示:你可以在HTML页面中利用多个 <canvas> 元素.
1.利用 style 属性来添加边框:
<canvas id=\"大众myCanvas\"大众 width=\公众200\"大众 height=\"大众100\"大众
style=\公众border:1px solid #000000;\"大众>
</canvas>
2.利用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制事情必须在 JavaScript 内部完成：
var c=document.getElementById(\"大众myCanvas\"大众);
var ctx=c.getContext(\"大众2d\公众);
ctx.fillStyle=\"大众#FF0000\"大众;
ctx.fillRect(0,0,150,75);
实例解析:
3.首先，找到 <canvas> 元素:
var c=document.getElementById(\"大众myCanvas\"大众);
4.然后，创建 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) 方法定义了矩形当前的添补办法。
iphone
Canvas 坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
坐标实例
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。
Canvas - 路径
在Canvas上画线，我们将利用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须利用到 \公众ink\公众 的方法，就像stroke().
定义开始坐标(0,0), 和结束坐标 (200,100)。然后利用 stroke() 方法来绘制线条:
Canvas - 文本
利用 canvas 绘制文本，主要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
利用 fillText():
利用 \"大众Arial\"大众 字体在画布上绘制一个高 30px 的笔墨（实心）：
JavaScript:
var c=document.getElementById(\"大众myCanvas\公众);
var ctx=c.getContext(\"大众2d\公众);
ctx.font=\"大众30px Arial\公众;
ctx.fillText(\"大众Hello World\公众,10,50);
大家有没有学会呢？没学会的话记得私信小编\公众011\"大众哦~
