You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.0 KiB
JavaScript
73 lines
2.0 KiB
JavaScript
|
|
let data = {
|
|
/**
|
|
* canvas绘图 start
|
|
*/
|
|
/**
|
|
* 文字绘制
|
|
*/
|
|
fillTextLineBreak (ctx, text, x, y, lw, lh, color = "#333", font = "32", weight = "500") {
|
|
// , align = "center"
|
|
var i = 0;
|
|
var n = 0;
|
|
var r = -1;
|
|
// var initHeight = 0;
|
|
ctx.font = weight + " " + font + "px Arial"; //字体大小
|
|
ctx.fillStyle = color; //字体颜色
|
|
// ctx.textBaseline = align;
|
|
// ctx.textAlign = align;
|
|
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;
|
|
}
|
|
},
|
|
/**
|
|
* 背景图绘制
|
|
*/
|
|
roundRect (ctx, img, bg_x, bg_y, bg_w, bg_h, bg_r) {
|
|
// 开始绘制
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
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();
|
|
},
|
|
roundRect_yuan (ctx, x, y, size) {
|
|
// 开始绘制
|
|
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();
|
|
},
|
|
|
|
roundRect1 (ctx, x, y, w, h, r, color) {
|
|
//绘制圆角矩形(无填充色))
|
|
ctx.save();
|
|
ctx.fillStyle = color;
|
|
ctx.strokeStyle = color;
|
|
ctx.lineJoin = "round"; //交点设置成圆角
|
|
ctx.lineWidth = r;
|
|
ctx.strokeRect(x + r / 2, y + r / 2, w - r, h - r);
|
|
ctx.fillRect(x + r, y + r, w - r * 2, h - r * 2);
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
},
|
|
/**
|
|
* canvas绘图 end
|
|
*/
|
|
}
|
|
|
|
export default data;
|