html主要代码
//to do something...
//to do something...
图片绘制代码
//to do something...
methods:{
// 图片绘制
drawImg(){
let that = this;
let query = mpvue.createSelectorQuery();
// 获取画布信息
query.select("#poster").boundingClientRect(rect => {
// console.log(rect); rect为画布属性
//获取绘图上下文
const ctx = mpvue.createCanvasContext("poster");
// 背景图绘制
ctx.save(); //保存画布之前信息
this.roundRect(ctx,0,0,rect.width,rect.height,10,'#fff');
ctx.restore();//获取画布之前信息
// 主图绘制
ctx.save();
this.roundRect(ctx,3,3,rect.width-6,311,10,'#fff');
//mainImgInfo.path 为网络图片地址
ctx.drawImage(mainImgInfo.path,3,-6,290,320);
ctx.restore();
/** 圆形背景绘制
* x:圆心x坐标
* y:圆心y坐标
* r:圆半径
*/
let circle = (x,y,r)=>{
ctx.beginPath()
ctx.arc(x, y, r, 0, Math.PI * 2);
//设置填充色为白色
ctx.setFillStyle('#fff')
// 设置阴影
ctx.setShadow(0, 0, 3, '#d6d6d6')
ctx.fill()
}
/** 圆形图片绘制
* x:圆心x坐标
* y:圆心y坐标
* r:圆半径
* src:图片地址
* x1:图片左上角x坐标
* y1:图片左上角y坐标
* w:图片宽度
* h:图片高度
*/
let circleImg = (x,y,r,src,x1,y1,w,h)=>{
ctx.save()
ctx.beginPath()
// 画圆
ctx.arc(x, y, r, 0, Math.PI * 2);
// 剪切
ctx.clip();
// 绘图
ctx.drawImage(src,x1,y1,w,h);
ctx.restore()
}
circle(50, 342, 33);
circle(246, 342, 33);
circle(149, 339, 37);
//下面三个图片地址为本地图片地址
circleImg(50, 342, 31,'/static/images/tempImg/lottery.png',19, 311,62,62);
circleImg(246, 342, 31,'/static/images/tempImg/lottery.png',215, 311,62,62);
circleImg(149, 339, 35,'/static/images/tempImg/lottery.png',114, 304,70,70);
/** 文字绘制
* content:文字内容
* src:图片地址
* x:文字左上角x坐标
* y:文字左上角y坐标
*/
let text = (ctx,content,x,y)=>{
ctx.setTextAlign('center'); // 文字居中
ctx.setFillStyle('#000'); // 文字颜色:黑色
//设置字体大小
ctx.setFontSize(9)
ctx.fillText(content, x, y);
}
// 加粗效果
text(ctx,name,50,388-0.5)
text(ctx,name,50-0.5,388)
text(ctx,'为您贴心服务',50,400)
text(ctx,'长按扫码',149,388)
text(ctx,'进入活动页',149,400)
text(ctx,'幸运大转盘',246,388)
text(ctx,'赢积分享好礼',246,400)
ctx.draw();
}).exec();
},
/**
*
* @param {CanvasContext} ctx canvas上下文
* @param {number} x 圆角矩形选区的左上角 x坐标
* @param {number} y 圆角矩形选区的左上角 y坐标
* @param {number} w 圆角矩形选区的宽度
* @param {number} h 圆角矩形选区的高度
* @param {number} r 圆角的半径
* @param {number} color 圆角的背景颜色
*/
roundRect(ctx, x, y, w, h, r,color) {
// 开始绘制
ctx.beginPath()
// 设置填充背景的颜色
ctx.setFillStyle(color)
// 左上角
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
// border-top
ctx.moveTo(x + r, y)
ctx.lineTo(x + w - r, y)
ctx.lineTo(x + w, y + r)
// 右上角
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
// border-right
ctx.lineTo(x + w, y + h - r)
ctx.lineTo(x + w - r, y + h)
// 右下角
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
// border-bottom
ctx.lineTo(x + r, y + h)
ctx.lineTo(x, y + h - r)
// 左下角
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
// border-left
ctx.lineTo(x, y + r)
ctx.lineTo(x + r, y)
//填充背景色
ctx.fill()
ctx.closePath()
// 剪切
ctx.clip()
},
}
//to do something...
效果图
背景图(白色区域为canvas区域,背景图与canvas大小一致)
c1.png
背景图+主图
c2_看图王.png
背景图+主图+圆形背景图
c3_看图王.png
背景图+主图+圆形背景图+圆形图
c4_看图王.png
背景图+主图+圆形背景图+圆形图+文字
c5_看图王.png
参考文章链接https://juejin.im/post/5b7cecd7e51d4538e3318f27