HTML5绘制空心的文本
1、设计源码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5绘制空心的文本</title> <script type="text/javascript"> /** * 绘制空心的文本 */ function drawHollowText() { //找到<canvas>元素 var canvas = document.getElementById("canvas"); //创建context对象 var ctx = canvas.getContext("2d"); //设置字样和字体大小 ctx.font = "50px 微软雅黑"; //绘制空心文本 ctx.strokeText("HTML5",300,300); } </script> </head> <body onLoad="drawHollowText();"> <canvas id="canvas" width="600" height="600"></canvas> </body> </html>
2、实现结果
3、结果说明
(1)创建一个画布,并设置id、宽度和高度
<canvas id="canvas" width="600" height="600"></canvas>
(2)找到<canvas>元素
var canvas = document.getElementById("canvas");
(3)创建context对象,选择“2d”
var ctx = canvas.getContext("2d");
(4)设置字样和字体大小
ctx.font = "50px 微软雅黑";
(5)绘制空心文本,设置文本内容、文本横坐标起始坐标和文本纵坐标起始坐标
ctx.strokeText("HTML5",300,300);