(1)、什么是画布
HTML5<canvas>元素用于图形的绘制，通过脚本(通常是JavaScript)来完成。
<canvas>标签只是图形容器，必须使用脚本来绘制图形。你以通过多种方法使用canvas绘制路径,盒、圆、字符以及添加图像。
(2)、创建一个画布（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:1pxsolid#000000;">
</canvas>
(3)、使用JavaScript来绘制图像
canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完
成：
Var c=document.getElementById("myCanvas");//获取画布元素
Va rctx=c.getContext("2d"); getContext("2d") 使用2d页面 对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字/符以及添加图像的方法
Fill 永远填充
ctx.fillStyle="#FF0000";设置fillStyle属性 设置样式 可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。
ctx.fillRect(0,0,150,75); 方法定义了矩形当前的填充方式
fillRect（x轴，y轴，宽，高） x y 轴坐标是左上角相对页面的位置
(4)、Canvas-路径（线条）
moveTo(x,y)定义线条开始
lineTo(x,y)定义线条结束坐标，
stroke 画线
strokeStyle属性定义线条的颜色 默认是黑色的，绘制线条我们必须使用到"ink"的方法，就像stroke()。
(6)、Canvas-圆
在canvas中绘制圆形,我们将使用以下方法:
arc(x,y,r,start,stop)
参数描述
x圆的中心的x坐标。
y圆的中心的y坐标。
r圆的半径。
start起始角，以弧度计。（弧的圆形的三点钟位置是0度）。
stop结束角，以弧度计。
方向 Ture（逆时针）或false（顺时针） 圆是顺时针还是逆时针 默认是false
例子：
varc=document.getElementById("myCanvas");
varctx=c.getContext("2d");
tai1.beginPath();
//边的宽度
ctx.lineWidth=5;
//边的颜色
ctx.strokeStyle="red";
//填充的颜色
ctx.fillStyle="yellow";
ctx.fill();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
(7)、Canvas-文本
font-定义字体，fillText(text,x,y)
-在canvas上绘制实心的文本，strokeText(text,x,y)-在canvas上绘制空心的文本。使用"Arial"字体在画布上绘制一个高30px的文字（实心）：
例如：
varc=document.getElementById("myCanvas");
varctx=c.getContext("2d");
ctx.font="30pxArial";
//字体的颜色
ctx.fillStyle="red";
ctx.fillText("HelloWorld",10,50);
(8)、Canvas-渐变
渐变可以填充在矩形,圆形,线条,文本等等,各种形状可以自己定义不同的颜色。
置Canvas渐变：
createLinearGradient(x,y,x1,y1)-创建线条渐变，
createRadialGradient(x,y,r,x1,y1,r1)-创建一个径向/圆渐变，
|
x0 |
渐变的开始圆的 x 坐标 |
|
y0 |
渐变的开始圆的 y 坐标 |
|
r0 |
开始圆的半径 |
|
x1 |
渐变的结束圆的 x 坐标 |
|
y1 |
渐变的结束圆的 y 坐标 |
|
r1 |
结束圆的半径 |
当我们使用渐变对象addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1. 如：grad.addColorStop(0, "red");
grad.addColorStop(0.5, "blue");
grad.addColorStop(1, "green");
使用渐变，设置fillStyle（即 ctx.fillStyle=grad）或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。