您当前的位置: 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);