一、画布,图片添加圆角
/**
* 自定义函数roundRect
* 画圆弧
* ctx >> 画布
*bg_x 图片的x坐标
*bg_y 图片的y坐标
*bg_w 图片宽度
*bg_h 图片高度
*bg_r 图片圆角
*
*/
function roundRect(ctx, img, bg_x, bg_y, bg_w, bg_h, bg_r) {
// 开始绘制
ctx.save();
ctx.beginPath();
// var bg_x = 15;
// // 图片的y坐标
// var bg_y = 270;
// // 图片宽度
// var bg_w = 68;
// // 图片高度
// var bg_h = 92;
// // 图片圆角
// var bg_r = 5;
ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI * 1.5);
ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2);
ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5);
ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI);
ctx.clip();
ctx.drawImage(img, bg_x, bg_y, bg_w, bg_h);
// 恢复之前保存的绘图上下文
ctx.restore();
}
//使用:
util.roundRect(ctx, '图片路劲', 20, 20, 100, 135, 10);
二、画布,画圆
/**
* 自定义函数roundRect_yuan
* 画圆
* ctx >> 画布
*x圆的x坐标
*y圆的y坐标
*size 圆半径
*
*/
function roundRect_yuan(ctx, x, y, size) {
// 开始绘制
// 圆形位置 大小
// var x = 120;
// var y = 130;
// var size = 60;
ctx.save(); // 保存
ctx.beginPath(); // 开始绘制
// ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.arc(size / 2 + x, size / 2 + y, size / 2, 0, Math.PI * 2, false);
ctx.clip();
// 恢复之前保存的绘图上下文
ctx.restore();
}
//使用:
util.roundRect_yuan(ctx, 100, 100, 70);
二、画布,文字换行
按照指定宽度换行
/**
* canvas文本自动换行,注意调用前要设置字体,例如: ctx.font = '12px Arial'
* @param {*} ctx CanvasRenderingContext2D
* @param {*} text 文本
* @param {*} x
* @param {*} y
* @param {*} lw 所占宽度
* @param {*} lh 行高
* return 绘制文本所需的高度
*/
const fillTextLineBreak = (ctx, text, x, y, lw, lh, color = '#000', font = '14') => {
var i = 0;
var n = 0;
var r = -1;
var initHeight = 0;
ctx.font = "" + font + "px Arial"; //字体大小
ctx.fillStyle = color; //字体颜色
while (i < text.length) {
while (ctx.measureText(text.substring(n, i)).width < lw && i < text.length) {
i++
}
r++
ctx.fillText(text.substring(n, i), x, y + lh * r)
n = i
}
initHeight = lh * r;
wx.setStorageSync('initHeight', initHeight);
}
//使用:
util.fillTextLineBreak(ctx,'文本内容', 20, 580, 322, 20); // 自动换行
按照换行符(/r/n)换行
/**
* canvas文本自动换行,根据换行符换行,水平居中
* text文本内容
* x轴坐标
* y轴坐标
*/
function fillTextLineBreakcount(ctx, text, x, y) {
var initHeight = 0; //行高
var textArray = text.split('\r\n');
ctx.font = "normal 500 16px Arial"; //字体大小
ctx.fillStyle = "#fff"; //字体颜色
ctx.textAlign = "center";//文本居中
for (let i = 0; i < textArray.length; i++) {
ctx.fillText(textArray[i], x, y + initHeight)
initHeight = initHeight + 20;
}
}
//使用:util.fillTextLineBreakcount(ctx,'测试第一行\r\n测试第二行',当前画布宽度除以2, y轴坐标); // 自动换行