canvas使用案例

最近遇到了合成图片的一些坑，所以就想学习一下canvas虽然说这个是h5的新特性但是也没有怎么了解过，下面就是一些学习的经验：
首先你需要创建canvan这个标签，有了这个标签你才可以对他进行操作，

<canvas id='canvas' width='150' height='150'></canvas>
这样这个标签就创建好了

下面就该是在js里面对这个创建好的canvas进行操作了

let canvas=document.getElementById('canvas');
//这个获取到canvas这个元素
let ctx=canvas.getContext('2d');
//创建getContext对象是内建的html5对象拥有多种绘制路径，矩形，圆形，字符的方法。
ctx.fillStyle="rgb(200,0,0)";
//用于给创建的元素添加颜色
ctx.fillRect(x,y,w,h);
//用于对元素进行一个位置和大小的控制
ctx.moveTo(x,y)
//定义线条的开始坐标
ctx.lineTo(x,y)
//定义线条的结束坐标
ctx.stroke()
//有了坐标还需要一个来绘制线条
ctx.arc(x,y,r,start,stop)
//用于绘制圆形后面也要使用stroke（）来绘制线条



canvas--字体
ctx.font='50px 微软雅黑'
//定义字体的高度和样式
ctx.fillText(text,x,y)
//在canvas上绘制实心的文本
ctx.strokeText(text,x,y)
//在canvas上绘制空心的文本



canvas--渐变
let grd=ctx.createLinearGradient(x,y,x1,y1)
//创建线条渐变
let grd=ctx.createRadiaGradient(x,y,r,x1,y1,r1)
//创建一个径向圆渐变
grd.addColorStop(0,red)
//方法指定颜色停止，参数使用坐标来描述可以使0至1
ctx.fillStyle=grd
//使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
ctx.fillRect(x,y,w,h)
//用于对元素进行一个位置和大小的控制


canvas--图像
let img=document.getElementById('image')
//获取图片元素
ctx.drawImage(image,x,y)
//将图片放置在canvas画布上