HTML5 canvas基本绘图之文字渲染

与文本渲染有关的主要有三个属性以及三个方法：

上述的属性和方法的基本用法如下：

 VAR  canvas = document.getElementById("canvas");   

        var context = canvas.getContext("2d");   

      

        context.font="bold 30px Arial"; // 设置样式    

        context. stroke Style = " # 1712F4";   

        context.strokeText("欢迎来到我的博客！",30,100);   

      

        context.font="bold 50px Arial";    

        var grd = context.createLine arg ra die nt( 30 , 200, 400 , 300 );//设置渐变填充样式   

        grd.addColorStop(0,"#1EF9F7");   

        grd.addColorStop(0.25,"# fc 0F31");   

        grd.addColorStop(0.5,"#E CF 811");   

        grd.addColorStop(0.75,"#2F0A F1 ");   

        grd.addColorStop(1,"#160303");   

        context.fillStyle = grd;   

        context.fillText("欢迎来到我的博客！",30,200);   

      

        context.save();   

        context.moveTo(200,280);   

        context.l inet o(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.re Store ();   

      

        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=" ;m iddle";   

        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中文网（HdhCmsTestphp.cn）！

总结

以上是 为你收集整理的 HTML5 canvas基本绘图之文字渲染 全部内容，希望文章能够帮你解决 HTML5 canvas基本绘图之文字渲染 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于HTML5 canvas基本绘图之文字渲染的详细内容...