uni-appcanvas绘制图⽚和⽂字
canvas画布svg和canvas的区别
前⾔
前⼀段时间我们⽼师让我写⼀个关于画布功能的⼀个海报，这个海报是由图⽚和⽂字组成，刚开始我是不太了解这个画布的，后来各种百度…
⾸先需要在结构层设置的画布宽⾼以及画布id
<view class="indeximg">
<canvas canvas-id="firstCanvas"></canvas>
</view>
绘制远程图⽚
canvas⽆法直接读取远程图⽚，所以需要使⽤uni-app官⽹api
src:"img/images/yxzj/act/a20160510story/relavance/heroes/hero48.jpg",
success(res){
console.log(res.path)
var ctx = ateCanvasContext("firstCanvas")// 使⽤画布创建上下⽂图⽚
ctx.drawImage(res.path, x, y,100,100)// 设置图⽚坐标及⼤⼩，括号⾥⾯的分别是（图⽚路径，x坐标，y坐标，width，height）
ctx.save();//保存
ctx.draw()//绘制
}
})
绘制⽂字
ctx.fillText("内容",240,40);//⽂字内容、x坐标，y坐标
ctx.font ='normal 20px STXingkai';// 字体
ctx.setFontSize(10)//设置字体⼤⼩，默认10
ctx.setFillStyle('#DD524D')//⽂字颜⾊：默认⿊⾊
ctx.fillText("width:"+ asureText(that.sent[0]).width,50,50)//显⽰⽂字宽度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。