空心文字HTML,HTML5绘制空心的文本

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);