一.概述
canvas只是图像的容器，绘制图像需要使用javascript来完成
1.基本步骤
0.定义一个画布，设置长宽。
<canvas id="myCanvas" width="200" height="300"><canvas>
1.首先找到canvas元素
var c = document.getElementById("myCanvas");
2.创建context对象
var ctx = c.getContext("2d");
3.绘制一个具体的图形，如下绘制一个颜色为#fff000的长方形
ctx.fillStyle = "#fff000";
ctx.fillRect(0,0,150,75);
2.方法
fill():填充
stroke():描边
二.应用场景
1.canvas --路径
moveTo(x,y);定义线条开始的坐标
lineTo(x,y):定义线条结束的坐标
var c =document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(100,100);
ctx.lineTo(100,200);
2.canvas -- 圆形
arc( x, y, r, start,stop,[true/false]);
x,y: 坐标原点
r:半径
start,stop:起始角度到结束角度
true/false:顺/逆时针
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,30,0,2*Math.PI);
ctx.stroke();
3.canvas -- 文本
font : 定义字体（字体，大小）
fillText： 绘制实心的文本
strokeText：绘制空心的文本
4.canvas -- 渐变
线条渐变：createLinearGradient(x,y,x1,y1);
径向渐变：createRadialGradient(x,y,r,x1,y1,r1);
addColorStop():指定颜色停止，可以使用坐标，通常0-1
线条渐变
//创建渐变
var grd= ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
5.canvas -- 图像
drawImage(image,x,y);
