上述的属性和方法的基本用法如下：
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);
效果如下：
以上就是html5 canvas基本绘图之文字渲染 的内容。