HTML5 canvas入门之绘制文本

是光の谢宣骞

已于 2022-04-03 14:12:07 修改

阅读量359

点赞数

分类专栏：其他学习文章标签： html5 canvas

于 2020-12-22 15:24:05 首次发布

本文链接：https://blog.csdn.net/qq_45870740/article/details/111557240

版权

其他学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

话不多说，进入正题，直接上代码，相关简介在注释里有，皆为细读HTML5著作经典所学，分享给大家！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;

			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="800px" height="800px" style="border: 1px solid black;"></canvas>
		<script>
			// 获取上下文（必须）
			var canvas = document.getElementById("canvas")
			var context = canvas.getContext("2d")
			// lineWidth是针对于stroke而言的
			context.lineWidth=40
			context.fillStyle="red"
			context.strokeStyle="yellow"
			// 设置字体大小和font-family
			context.font="70px weiruanyahei"
			// 设置字体对齐方式:textAlign:center/start/end/left/right
			// 是以起点位置为基准的
			context.textAlign="center"
			// 设置文本的基线:textBaseline:top/hanging/middle/alphabetic/ideographic/bottom
			context.textBaseline="bottom"
			// 绘制文本：fillText/strokeText()
			// 带五个参数（文本内容，起始位置x,起始位置y,宽度）
			context.fillText("Hello world",350,400)
			// context.strokeText("Hello yahei",100,200)
			
			
			// 设置阴影
			// conext.shadowBlur/shadowOffsetX/shadowOffsetY/shadowColor
			// 分别为阴影的模糊程度/阴影在x方向的偏移量/阴影在y方向的偏移量/阴影颜色
			// 使用透明度
			// context.globalAlpha=[0,1]
			context.beginPath()
			context.globalAlpha=0.5
			context.fillStyle="red"
			context.fillRect(350,400,20,20)
		</script>
	</body>
</html>