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至1ctx.fillStyle=grd//使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。ctx.fillRect(x,y,w,h)//用于对元素进行一个位置和大小的控制canvas--图像let img=document.getElementById('image')//获取图片元素ctx.drawImage(image,x,y)//将图片放置在canvas画布上