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