HTML5 canvas基本绘图之文字渲染
程序员文章站
2022-07-22 21:10:56
是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之文字渲染方法，感兴趣的小伙伴们可以参考一下... 16-06-27...
与文本渲染有关的主要有三个属性以及三个方法：
上述的属性和方法的基本用法如下：
javascript code复制内容到剪贴板
- var canvas = document.getelementbyid("canvas");
- var context = canvas.getcontext("2d");
- context.font="bold 30px arial"; //设置样式
- context.strokestyle = "#1712f4";
- context.stroketext("欢迎来到我的博客！",30,100);
- context.font="bold 50px arial";
- var grd = context.createlineargradient( 30 , 200, 400 , 300 );//设置渐变填充样式
- grd.addcolorstop(0,"#1ef9f7");
- grd.addcolorstop(0.25,"#fc0f31");
- grd.addcolorstop(0.5,"#ecf811");
- grd.addcolorstop(0.75,"#2f0af1");
- grd.addcolorstop(1,"#160303");
- context.fillstyle = grd;
- context.filltext("欢迎来到我的博客！",30,200);
- context.save();
- context.moveto(200,280);
- context.lineto(200,420);
- context.stroke();
- context.font="bold 20px arial";
- context.fillstyle = "#f80707";
- context.textalign="left";
- context.filltext("文本在指定的位置开始",200,300);
- context.textalign="center";
- context.filltext("文本的中心被放置在指定的位置",200,350);
- context.textalign="right";
- context.filltext("文本在指定的位置结束",200,400);
- context.restore();
- context.save();
- context.moveto(10,500);
- context.lineto(500,500);
- context.stroke();
- context.fillstyle="#f60d0d";
- context.font="bold 20px arial";
- context.textbaseline="top";
- context.filltext("指定位置在上面",10,500);
- context.textbaseline="bottom";
- context.filltext("指定位置在下面",150,500);
- context.textbaseline="middle";
- context.filltext("指定位置居中",300,500);
- context.restore();
- context.font="bold 40px arial";
- context.strokestyle = "#16f643";
- var text = "欢迎来到我的博客！";
- context.stroketext("欢迎来到我的博客！",10,600);
- context.stroketext("上面字符串的宽度为："+context.measuretext(text).width,10,650);
效果如下：