html文本绘制,HTML5绘制实心的文本

HTML5绘制实心的文本

1、设计源码

HTML5绘制实心的文本

function drawSolidText()

{

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.font = "40px 微软雅黑";

ctx.fillText("HTML5",200,200);

}

2、实现结果

3、源码说明

(1)创建一个画布，设置宽度和高度

(2)获取到元素

var canvas = document.getElementById("canvas");

(3)创建context对象

var ctx = canvas.getContext("2d");

(4)设置绘制文本的字体和字体大小

ctx.font = "40px 微软雅黑";

(5)在画布上绘制实心的文本，其中三个参数含义是：第一个是绘制的文本，第二个是绘制文本横坐标起始坐标，第三个是纵坐标的起始坐标

ctx.fillText("HTML5",200,200);