html5 canvas学习--绘制文字

最新推荐文章于 2024-06-27 15:57:20 发布

xiaopengyaonixi

最新推荐文章于 2024-06-27 15:57:20 发布

阅读量1.2w

点赞数 3

分类专栏： Html5

Html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1.绘制填充文字：context.fillText(text,x,y,[maxWidth])

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			ctx.font = "italic 35px 黑体";
			ctx.fillStyle = "Red";
			ctx.fillText("绘制填充文字",30,60,200);
			ctx.font = "bold 35px 宋体";
			ctx.fillStyle = "blue";
			ctx.fillText("绘制填充文字",30,100);
			ctx.font = "25px 隶书";
			ctx.fillStyle = "Green";
			ctx.fillText("绘制填充文字",30,130);
		}
		window.onload = function(){
			draw();
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="350" height="200" style="border:solid 1px gray;"></canvas>
</body>
</html>

2. 绘制轮廓文字：context.strokeText(text,x,y,[maxWidth]); 测量文字的长度:context.measureText(text);

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			ctx.font = "bold 20px 黑体";
			ctx.fillStyle = "Blue";
			var txt1 = "滚滚长江东逝水,浪花淘尽英雄";
			ctx.fillText(txt1,10,40);
			var txt2 = "以上字符串的宽度为";
			var mtx1 = ctx.measureText(txt1);
			var mtx2 = ctx.measureText(txt2);
			ctx.font = "bold 15px 宋体";
			ctx.fillStyle = "Red";
			ctx.fillText(txt2,10,80);
			ctx.fillText(mtx1.width,mtx2.width,80);
			var message = "这是文字";
			// 绘制空心文字
			ctx.font = "25px 隶书";
			ctx.strokeStyle = "Green";
			ctx.strokeText(message,30,130);
		}

		window.onload = function(){
			draw();
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="350" height="200"></canvas>
</body>
</html>

xiaopengyaonixi

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas学习--绘制文字

1.绘制填充文字：context.fillText(text,x,y,[maxWidth]) function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.font = "italic 35px 黑体"; ctx.fillStyle = "Red";
复制链接

扫一扫

专栏目录