出自：https://blog.csdn.net/luanpeng825485697/article/details/77010825
一、Canvas是什么？
Canvas就是一个画布，可以进行画任何的线、图形、填充等一系列的操作，而且操作的画图的就是js，所以让js编程到了嗑药的地步。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。
二、Canvas重要的Context对象
(1) 要使用Canvas来绘制图形必须在页面中添加Canvas的标签。
例如： <canvas id="demoCanvas" width="500" height="500"></canvas>
(2) 当然只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属性也是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvas的Dom对象就可以获取他的上下文了，Canvas绘制图形都是靠着Canvas对象的上下文对象。
代码：
<script type="text/javascript">
//第一步：获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：获取上下文
if(canvasDom .getContext){ //判断浏览器是否支持canvas
//context是画布，getContext获取绘图上下文对象，也有名为WebGL的3d上下文
var context = canvasDom .getContext("2d");
}
</script>(3) Context上下文默认两种绘制方式：第一种：绘制线（stroke），第二种：填充：fill。
注意：决定了使用哪种方式之后，在填充或者绘制线之前先设置样式。
绘制矩形
context.fillStyle = "#0000ff"; //填充颜色
context.fillRect(10,10,70,70); //填充矩形，xy宽高(像素)
context.lineWidth = 20; //边框宽度
context.lineCap = "round"; //线条末端形状，butt平头，round圆头，square方头，
context.lineJoin = "round"; //线条交叉方式，round圆交，bevel斜交，miter斜接
context.strokeStyle = "red"; //描边颜色
context.strokeRect(50,50,50,50); //描边矩形
context.clearRect(50,50,20,20); //清除一块矩形区域绘制路径
context.beginPath(); //创建路径
context.arc(200,100,20,0,2*Math.PI,false);//绘制圆参数：圆心坐标，半径，起始角度，是否顺时针。
//arcTo绘制圆弧
context.moveTo(200,100); //移动绘图游标
context.lineTo(200,15); //绘制直线，从游标位置惠子直线到参数，
//bezierCurveTo绘制曲线，quadraticCurveTo绘制二次曲线，reac绘制矩形，
context.fillStyle = "rgba(0,0,0,1)"
context.stroke(); //用strokeStyle描边
context.fill(); //用fillStyle填充绘制文本
context.font = "bold 14px Arial"; //设置文本样式，大小，字体
context.textAlign="center"; //文本对齐方式，start、end
context.textBaseline = "middle"; //上下对齐方式，top、middle、bottom
context.fillText("文本",200,15); //fillText使用fillStyle，strokeText使用strokeStyle
context.globalAlpha =0.5; //设置全局透明度
//context.save(); //保存当前状态
context.translate(10,10); //坐标平移，
//transform矩阵变换，setTransform先恢复默认再矩阵变换
context.rotate(1); //旋转角度，scale缩放比例，渐变
createLinearGradient线性渐变、createRadialGradient辐射渐变
渐变线
context.moveTo(0,0);
context.lineTo(400,300);
var gnt1 = context.createLinearGradient(0,0,400,300);//线性渐变的起止坐标
gnt1.addColorStop(0,'red'); //创建渐变的开始颜色，0表示偏移量
gnt1.addColorStop(1,'yellow'); //创建渐变的结束颜色，1表示偏移量，一个渐变中可以写任意个渐变颜色
context.lineWidth=3;
context.strokeStyle = gnt1;
context.stroke();渐变矩形
var gnt1 = context.createLinearGradient(10,0,390,0);
gnt1.addColorStop(0,'red'); //开始处颜色
gnt1.addColorStop(0.5,'green');//中间处颜色
gnt1.addColorStop(1,'blue'); //结尾处颜色
context.fillStyle = gnt1;
context.fillRect(10,10,380,280);渐变圆
var gnt = context.createRadialGradient(200,300,50,200,200,200);
gnt.addColorStop(1,'red');
gnt.addColorStop(0,'green');
context.fillStyle = gnt;
context.fillRect(0,0,800,600);
这里需要说明的是createRadialGradient方法，参数有（Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd），也就是说，它在实行渐变时，使用了两个圆，一个是原始的圆，一个是渐变式圆，其实，这种通过坐标与半径控制的方式可以实现很多样式，
drawImage绘制图像
var imageDom=document.getElementById("image");
context.drawImage(imageDom,10,10,20,20); //起点为(10,10)，图像大小会变成20x20像素； shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur阴影
context.shadowColor="rgba(0,0,0,0.5)" //设置阴影颜色
context.shadowOffsetX=5; //设置形状或路径x轴方向的阴影偏移量，默认值为0；
context.shadowOffsetY=5; //设置形状或路径y轴方向的阴影偏移量，默认值为0；
context.shadowBlur=4; //设置模糊的像素数，默认值为0，即不模糊。
//绘制半透明的蓝色矩形
context.fillStyle="rgba(0,0,255,1)";
context.fillRect(30,30,50,50); createPattern填充描边模式
var imageDom=document.images[0];
pattern=context.createPattern(imageDom,"repeat");
//repeat 默认。该模式在水平和垂直方向重复。
//repeat-x 该模式只在水平方向重复。
//repeat-y 该模式只在垂直方向重复。
//no-repeat 该模式只显示一次（不重复）。
context.fillStyle=pattern;
context.fillRect(10,10,150,150); scale、translate、rotate图像变换
//缩放图像
//scale(scaleX,scaleY):缩放图像，在x方向乘以scaleX，在y方向乘以scaleY。
//scaleX和scaleY的默认值都是1.0
context.scale(0.8,0.8);
//变换原点
//translate(x,y):将坐标原点移动到（x,y）。执行这个变换后，坐标(0,0)会变成之前由(x,y)表示的点
context.translate(100,100);
//旋转
//rotate(angle):围绕原点旋转图像angle弧度
context.rotate(1); toDataURL将canvas转化为图片数据
var imgurl = canvasDom.toDataURL("image/png");
var image = document.createElement("img");
image.src = imgurl;
hintdiv1.appendChild(image);