标签：canvas context img 路径 H5 填充 描边 文本 方法
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(); 画笔旋转
标签：canvas,context,img,路径,H5,填充,描边,文本,方法 来源： https://www.cnblogs.com/luchengx/p/12103793.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。