UI小哥给了一张UI图,让我实现小程序的分享海报
踩坑如下:
- canvas绘制文字自动换行
- canvas绘制文字,首行缩进
- canvas剪切圆形头像
一、canvas 绘制文字,自动换行
因为canvas.fillText绘制文字是没用自动换行的功能的,所以需要自己封装个函数来实现。
canvas有个APIctx.measureText(string str).width
可以获取字符串的像素长度
当一行文字的像素长度超过画布的长度时,就可以另起一行重新绘制文字
let lineWidth = 0;
for(let i=0;i<str.length;i++){
lineWidth += ctx.measureText(str[i]).width;
if(lineWidth>canvasWidth-2*initX){
ctx,fillText(str.substr(0,i),initX,initY);
initY+=lineHeight;
str = str.str.substr(i);
i = -i;
lineWidth;
}
if(i==str.length-1){
ctx.fillText(str.substr(0,i+1),initY);
}
}
复制代码
二、canvas首行缩进
因为canvas没有首行缩进的属性,只能是,绘制的时候,向右偏移两个字符的长度
let indent = true;
let indentWidth = 0;
for(let i=0;i<str.length;i++){
lineWidth += ctx.measureText(str[i]).width;
if(indent && i==1){
indentWidth = lineWidth;
}
if(indent && lineWidth>canvasWidth-2*initX-indentWidth){
ctx.fillText(str.substr(0,initX+indentWidth,initY);
initY+=lineHeight;
lineWidth=0;
indent = false;
str = str.substr(i);
i =-1;
}
}
复制代码
小总结,将自动换行和首行缩进,封装成函数如下
canvasTextAutoLine(ctx,canvasWidth,str,initY,lineHeight,indent=false){
let lineWidth = 0;
let indentWidth=0;
for(let i=0;i<str.length;i++){
lineWidth += ctx.measureText(str[i]).width;
if(indent && i==1){
indentWidth = lineWidth;
}
if(indent && lineWidth>canvasWidth-2*initX-indentWidth){
ctx.fillText(str.substr(0,initY);
initY+=lineHeight;
lineWidth=0;
indent = false;
str = str.substr(i);
i =-1;
}
if(lineWidth>canvasWidth-2*initX){
ctx.fillText(str.substr(0,initY);
initY+=lineHeight;
str=str.substr(i);
i=-1;
lineWidth=0;
}
if(i==str.length-1){
ctx.fillText(str.substr(0,initY);
}
}
return initY;
}
复制代码
三、canvas剪切出圆形的头像
canvas的APIctx.clip()
可以剪切图形,使用如下
ctx.save();
ctx.arc(25,25,0,Math.PI*2);
ctx.clip();
ctx.drawImage(headImg,25);
ctx.restore();
复制代码
结语
作者:胡志武
时间:2019/7/17
本人大二,想找个前端实习生的工作。求职中。。。