HTML5 canvas基本绘图之文字渲染

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基本绘图之文字渲染 的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！