本文的應用對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
2、http://caibaojian.com/canvas/