本文的应用对Canvas文本设置相关属性进行了汇总，具体使用说明请参考下面代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>文本设置</title> <style> #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } </style> </head> <body> <div id="canvas-warp"> <canvas id="canvas"> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </canvas> </div> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 600; canvas.height = 300; var context = canvas.getContext("2d"); //绘制背景画布 context.fillStyle = "#ccc"; context.fillRect(0,0,600,300); context.font = "italic bolder 60px serif"; //设置字体 //context.fillStyle = "green"; //字体颜色。 //设置渐变色 var grd = context.createLinearGradient(360,150,540,150); grd.addColorStop(0,"green"); grd.addColorStop(0.8,"red"); context.fillStyle = grd; context.textAlign = "center"; //文本的中心被放置在指定的位置。 context.textBaseline="middle"; //文本基线是 em 方框的正中。 context.shadowColor = "yellow"; //阴影颜色 context.shadowOffsetX = -50; //阴影x轴位移。正值向右，负值向左。 context.shadowOffsetY = -50; //阴影y轴位移。正值向下，负值向上。 context.shadowBlur= 5; //阴影模糊滤镜。数据越大，扩散程度越大。 context.globalAlpha = 0.5; //透明度 context.fillText("canvas文本设置",300,150); //显示填充文本 context.strokeText("canvas文本设置",300,150); //显示描边文本 }; </script> </body> </html>
展示效果如下图所示：
学习资料：
1、https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API