Canvas的简单使用：

Canvas：

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

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

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符、雪花特效、爱心特效以及添加图像等。

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

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

第一步：创建一个画布（Canvas）

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

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

<canvas>简单实例如下:

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

var myCancas = document.getElementById("myCanvas");

第二步：创建Context对象

var ctx=c.getContext("2d");//这里的2d指的是你做的项目用什么样式去展现

第三步：开始画

①   画矩形

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

这个以0,0为左顶点画一个宽150，高75的矩形。

②   画线

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

ctx.moveTo(0,0);//起始位置

ctx.lineTo(200,100);//终止位置

ctx.stroke();//开始画

③   画圆形

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

ctx.beginPath();

ctx.arc(50,50,40,0,2*Math.PI);//圆心位置50,50(x,y) 直径大小40 是否截取一部分0表示不截取，大概分为7份 1表示截取掉1/7  以此类推……

ctx.stroke();

④   写内容

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

ctx.font="30px Arial";//30是行高Arial是字体

ctx.fillText("HelloWorld",0,30);//如下图：0是距左边的距离(左边距) 30-行高之后距上边的距离

⑤   Canvas渐变：

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变

x yx1 y1四个的含义：

x、y是从那个地方开始去渐变，x1、y1是渐变的终点

如：(0,0,200,100)

忘斜下方渐变

（0，0，200，100）

忘右方渐变

createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

创建一个线性渐变：

varc=document.getElementById("myCanvas");

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

// 创建渐变

vargrd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");//从红色渐变成白色

grd.addColorStop(1,"white");

// 填充渐变

ctx.fillStyle=grd;

ctx.fillRect(5,10,150,80);

5为左边距  10为上边距 150为整体的宽度，80为整体的高度

效果如下：

创建圆形渐变：

varc=document.getElementById("myCanvas");

varctx=c.getContext("2d");

 

// 创建渐变

vargrd=ctx.createRadialGradient(75,50,5,90,60,100);

75，50为红色区域为开始拓展的位置 90 60为圆的

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

 

// 填充渐变

ctx.fillStyle=grd;

ctx. fillRect(10,10,150,80);