H5-canvas使用方法
1、首先要获取页面中的画布
var canvas = document.querySelector("canvas");
2、创建画笔
var context = canvas.getContext("2d");
3、选择要绘画的方式,进行绘画
1.context.stroke() 描边
context.strokeStyle = "#f00" 描边样式
2.context.fill() 填充
context.fillStyle = "#f00"; 填充样式
1、绘画矩形
x,y,w,h 分别代表横纵坐标和宽高
context.strokeRect(x,y,w,h) 描边矩形
context.fillRect(x,y,w,h); 填充矩形
2、渐变
创建渐变对象
var g = context.createLinearGradient(50,100,550,100);
添加颜色
g.addColorStop(0,"#f00")
g.addColorStop(0.5,"#fff")
g.addColorStop(1,"#f0f");
使用渐变对象填充
context.fillStyle = g
context.fillRect(50,50,500,200);
3、绘画文本
context.strokeText("想要绘画的文本",x,y) 描边文本
context.fillText("....",x,y) 填充文本
var text = "阿打算打打打";
context.measuerText(text).wifth 获取文本的宽度
context.measureText(text).heght 获取文本的高度
context.textBaseline = "top" 文本基线
默认值为:alphabetic 第三根线
属性值:top middle bottom
4、绘制(路径)
(注意:在绘制路径的时候最好是开始一段路径后在绘制完成后关闭画笔)
context.beginPath() 开始一段路径
context.moveTo(x,y) 开始的第一个点
context.lineTo(x,y) 经过的一个点,可以有多个
context.fill() 填充一段路径
context.stroke() 描边一段路径
context.closePath(); 结束一段路径的绘制
绘制圆
context.arc(x,y,r,start,end) 分别为:横纵坐标,半径,开始时的弧度,结束时的弧度
context.fill() 填充这个圆
context.stroke() 描边这个圆
5、绘制图片
创建一个img对象
var img = new Image();
添加图片路径
img.src = ""
因为src是异步,需要等img完全加载完才能去绘制
img.onload = function(){
context.drawImage(img,x,y,w,h);
}
6、画布中常用的一些方法,属性
context.fill() 填充方法
context.stroke() 描边方法
context.clip() 剪切方法
context.lineWidth = "10" 设置边框的宽度
context.fillStyle = "#f00" 填充样式
context.strokeStyle = "#f00" 描边样式
context.textBaseline = "top" 基线设置方式,参数有 top middle ..
context.measureText(txt).width 获取文本的宽度
context.font = "10px SieHer " 设置字体大小以及样式 ,两个参数都需要
context.getContext("2d") 获得2d画笔
context.beginPath(); 开始一段路径
context.closePath(); 结束一段路径
context.scale(0.9,0.9) 坐标的缩放倍数
context.drawImage(img,x,y,w,h); 将图片绘制到画布上
context.save(); 保存绘图的上下文 ,当前变形的数据(坐标什么呀什么的)
context.restore(); 恢复最近一次保存的画笔的变形状态
context.translate(); 变化坐标原点的变化(平移)
context.rotate(); 画笔旋转