HTML5 canvas基本绘图之文字渲染
更新时间:2023-04-03 04:52:25 阅读： 评论：0
与文本渲染有关的主要有三个属性以及三个方法：
上述的属性和方法的基本用法如下：
javascript code
复制内容到剪贴板
varcanvas=document.getelementbyid(“canvas”); varcontext=canvas.getcontext(“2d”); context.font=“bold30pxarial”;//设置样式 context.strokestyle=“#1712f4”; context.stroketext(“欢迎来到我的博客！”,30,100); context.font=“bold50pxarial”; vargrd=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台式机显卡221;); 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=“bold20pxarial”; 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=“bold20pxarial”; context.textbaline=“top”; context.filltext(“指定位置在上面”,10,500); context.textbaline=“bottom”; context.filltext(“指定位置在下面”,150,500); context.textbaline=“middle”; context.filltext(“指定位置居中”,300,500); context.restore(); context.font=“bold40pxarial”; context.strokestyle=“#16f643”; vartext=“欢迎来到我的博客！”; context.stroketext(“欢迎来到我的博客！”,10,600); context.stroketext(“上面字符串的宽度为：”+context.measuretext(text).width,10,650); 效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文word下载地址：HTML5 canvas基本绘图之文字渲染.doc
本文 PDF 下载地址：HTML5 canvas基本绘图之文字渲染.pdf
