H5-canvas使用方法

Posted 2021-03-20 luchengx

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(); 画笔旋转