1、画圆形图片
/**
* 画圆形图片
* @param {object} ctx canvas
* @param {number} width 图像宽度
* @param {number} height 图像高度
* @param {number} x 开始位置
* @param {number} y 结束位置
* @param {string} url 图片地址
*/
function drawCircular(ctx,width,height,x,y,url) {
var img_w = width;
var img_h = height;
var img_x = x;
var img_y = y;
ctx.save();
ctx.beginPath();
ctx.arc(img_w / 2 + img_x, img_h / 2 + img_y, img_w / 2, 0, Math.PI * 2, false);
ctx.clip();
ctx.drawImage(url, img_x, img_y, img_w, img_h);
ctx.restore();
}
2、根据每行字符长度换行,或者用\n换行
/**
* 文字换行,特例可用\n
* @param {Object} ctx 画布对象
* @param {String} text 文字
* @param {Number}} x 开始位置
* @param {Number} y 开始位置y
* @param {Number} h 行高
* @param {Number}} len 长度
* @param {String} textAlign 对齐方式
*/
function drawText(ctx,text,x,y,h,len,textAlign='left'){
ctx.font="22px SourceHanSansCN-Regular";
ctx.fillStyle = '#010101'
ctx.textAlign = textAlign;
var n=Math.ceil(text.length/len)
if(text.indexOf('\n')==-1){
y=y-n*h
for(var i=0;i<n;i++){
var nowT=text.slice(i*len,(i+1)*len)
ctx.fillText(nowT,x,y+i*h);
}
}else{
var arr=text.split('\n')
y=y-arr.length*h
for(var i=0;i<arr.length;i++){
ctx.fillText(arr[i],x,y+i*h);
}
}
}
3、根据宽度换行
/**
* canvas文字换行
* @param {object} context canvas
* @param {string} t 渲染文字
* @param {number} x 开始位置
* @param {number} y 结束位置
* @param {number} w 宽度
*/
function drawText2(context,t,x,y,w){
var chr = t.split("");
var temp = "";
var row = [];
context.font = "20px Arial";
context.fillStyle = "black";
context.textBaseline = "middle";
for(var a = 0; a < chr.length; a++){
if( context.measureText(temp).width < w && context.measureText(temp+(chr[a])).width <= w){
temp += chr[a];
}//context.measureText(text).width 测量文本text的宽度
else{
row.push(temp);
temp = chr[a];
}
}
row.push(temp);
for(var b = 0; b < row.length; b++){
context.fillText(row[b],x,y+(b+1)*24);//字体20,间隔24。类似行高
}
// 只显示2行,加...
/*for(var b = 0; b < 2; b++){
var str = row[b];
if(b == 1){
str = str.substring(0,str.length-1) + '...';
}
context.fillText(str,x,y+(b+1)*24);
}*/
}