HTML5绘制实心的文本

最新推荐文章于 2023-12-04 06:15:00 发布

翱翔天地

最新推荐文章于 2023-12-04 06:15:00 发布

阅读量2.6k

点赞数 2

分类专栏： HTML5 文章标签： html5 绘制实心的文本

本文链接：https://blog.csdn.net/you23hai45/article/details/50094497

版权

HTML5 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

HTML5绘制实心的文本

1、设计源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5绘制实心的文本</title>
<script type="text/javascript">
	function drawSolidText()
	{
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		ctx.font = "40px 微软雅黑";
		ctx.fillText("HTML5",200,200);
	}
</script>
</head>

<body onLoad="drawSolidText();">
   <canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>

2、实现结果

3、源码说明

（1）创建一个画布，设置宽度和高度

<canvas id="canvas" width="400" height="400"></canvas>

（2）获取到<canvas>元素

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

（3）创建context对象

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

（4）设置绘制文本的字体和字体大小

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

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

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

翱翔天地

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
HTML5绘制实心的文本

HTML5绘制实心的文本1、设计源码HTML5绘制实心的文本 function drawSolidText() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.font = "40px 微软雅黑"; ctx.fillText("HTML5"
复制链接

扫一扫