html5 canvas學習--繪製文字
阿新 • • 發佈：2019-02-01
1.繪製填充文字：context.fillText(text,x,y,[maxWidth])
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.font = "italic 35px 黑體"; ctx.fillStyle = "Red"; ctx.fillText("繪製填充文字",30,60,200); ctx.font = "bold 35px 宋體"; ctx.fillStyle = "blue"; ctx.fillText("繪製填充文字",30,100); ctx.font = "25px 隸書"; ctx.fillStyle = "Green"; ctx.fillText("繪製填充文字",30,130); } window.onload = function(){ draw(); } </script> </head> <body> <canvas id="myCanvas" width="350" height="200" style="border:solid 1px gray;"></canvas> </body> </html>
2. 繪製輪廓文字：context.strokeText(text,x,y,[maxWidth]); 測量文字的長度:context.measureText(text);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.font = "bold 20px 黑體"; ctx.fillStyle = "Blue"; var txt1 = "滾滾長江東逝水,浪花淘盡英雄"; ctx.fillText(txt1,10,40); var txt2 = "以上字串的寬度為"; var mtx1 = ctx.measureText(txt1); var mtx2 = ctx.measureText(txt2); ctx.font = "bold 15px 宋體"; ctx.fillStyle = "Red"; ctx.fillText(txt2,10,80); ctx.fillText(mtx1.width,mtx2.width,80); var message = "這是文字"; // 繪製空心文字 ctx.font = "25px 隸書"; ctx.strokeStyle = "Green"; ctx.strokeText(message,30,130); } window.onload = function(){ draw(); } </script> </head> <body> <canvas id="myCanvas" width="350" height="200"></canvas> </body> </html>
