【第3章文本】3.2 设置字型属性

ncj393437906

于 2025-05-29 10:15:04 发布

阅读量618

点赞数 9

CC 4.0 BY-SA版权

分类专栏：《HTML5 Canvas核心技术图形、动画与游戏开发》文章标签： Canvas

本文链接：https://blog.csdn.net/ncj393437906/article/details/148303204

《HTML5 Canvas核心技术图形、动画与游戏开发》专栏收录该内容

41 篇文章

订阅专栏

文章目录

前言
示例

前言

在 Canvas 中，可以通过绘图环境对象的 font 属性设置文本所采用的字型。该属性是一个 CSS3 格式的字型字符串，各个分量如下表所示，在设置font属性时，需要从上到下一次制定这些分量的值。

Canvas 默认字型是 10px sans-serif 。font-style、font-variant、font-weidht的默认值均为normal。

字型属性分量	描述
font-style	规定字体样式。可能的值：normal、italic、oblique
font-variant	规定字体变体。可能的值：normal、small-caps
font-weight	规定字体的粗细。可能的值：normal、bold、bolder、lighter、100-900
font-size	规定字体的大小。可能的值：larger、medium……
line-height	浏览器强制normal值，不管你设置什么值
font-family	规定字体系列。

示例

该应用程序将每个要绘制的字符串设置为绘图环境对象的font值，然后用fillText()绘制到屏幕上。

左边这一列字符串所使用的字型都是Palatino字体集的变种，右边一列演示了一些“网络安全字型”(Web-safe font)的绘制效果。这个“安全”并不是说字体本身有什么危险性，实际意思是这些字体在三大主流操作系统中所有浏览器上都能被正确地渲染，因为已经广泛地被使用在了Windows、Mac和Linux上。

另外，如果font值无效，浏览器就不会修改该属性值。比如说，设置font-style和font-family分量时弄错了顺序，或非法指定了font-style分量等等。

在这里插入图片描述

<!DOCTYPE html>
<!-- 定义HTML文档语言为中文 -->
<html lang="zh-CN">
	<head>
		<!-- 设置文档字符编码为UTF-8 -->
		<meta charset="UTF-8" />
		<!-- 设置页面标题 -->
		<title>3-3-设置font属性</title>
		<style>
			/* 设置页面背景颜色 */
			body {
				background: #eeeeee;
			}

			/* 设置画布样式 */
			#canvas {
				background: #ffffff;
				margin-top: 5px;
				margin-left: 10px;
				/* 兼容不同浏览器的阴影效果 */
				-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
				-moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
				box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
				/* 设置边框样式 */
				border: 1px solid rgba(0, 0, 0, 0.2);
			}
		</style>
	</head>
	<body>
		<!-- 创建画布元素，不支持时显示提示 -->
		<canvas id="canvas" width="850" height="440">canvas not supports</canvas>

		<script>
			// 使用严格模式
			'use strict'

			// 获取画布元素和绘图上下文
			let canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d'),
				/**
				 * 左列字体样式数组
				 * 使用Palatino字体及其变种
				 * Palatino是一种常见的衬线字体
				 */
				LEFT_COLUMN_FONTS = [
					'2em palatino', // 标准大小
					'bolder 2em palatino', // 加粗
					'lighter 2em patatino', // 变细(注意拼写错误)
					'italic 2em palatino', // 斜体
					'oblique small-caps 24px palatino', // 倾斜+小型大写字母
					'bold 14pt palatino', // 粗体+点单位
					'xx-large palatino', // 超大号
					'italic xx-larrge palatino', // 斜体+超大号(注意拼写错误)
				],
				/**
				 * 右列字体样式数组
				 * 使用网络安全字体
				 */
				RIGHT_COLUMN_FONTS = [
					'oblique 1.5em lucida console', // 倾斜+等宽字体
					'x-large fantasy', // 大号+幻想字体
					'italic 28px monaco', // 斜体+等宽字体
					'italic large copperplate', // 斜体+铜版字体
					'36px century', // 像素单位
					'28px tahoma', // 微软常用字体
					'28px impact', // 紧凑无衬线字体
					'1.7em verdana', // 常用无衬线字体
				],
				// 左列文本的X坐标
				LEFT_COLUMN_X = 50,
				// 右列文本的X坐标
				RIGHT_COLUMN_X = 500,
				// 行间距
				DELTA_Y = 50,
				// 顶部起始Y坐标
				TOP_Y = 50,
				// 当前Y坐标
				y = 0

			/**
			 * 绘制背景网格线
			 */
			let drawBackground = () => {
				// 垂直间距
				let STEP_Y = 12,
					// 从画布底部开始绘制
					i = context.canvas.height

				// 设置网格线样式
				context.strokeStyle = 'rgba(0,0,200,0.225)'
				context.lineWidth = 0.5

				// 保存和恢复绘图状态(此处可能多余)
				context.save()
				context.restore()

				// 从下往上绘制水平网格线
				while (i > STEP_Y * 4) {
					context.beginPath()
					context.moveTo(0, i)
					context.lineTo(context.canvas.width, i)
					context.stroke()
					i -= STEP_Y
				}

				context.save()

				// 绘制垂直参考线
				context.strokeStyle = 'rgba(100,0,0,0.3)'
				context.lineWidth = 1

				context.beginPath()
				context.moveTo(35, 0)
				context.lineTo(35, context.canvas.height)
				context.stroke()

				context.restore()
			}

			// 绘制背景
			drawBackground()

			// 设置文本填充颜色为蓝色
			context.fillStyle = 'blue'

			// 绘制左列所有文本
			LEFT_COLUMN_FONTS.forEach((font) => {
				// 设置当前字体
				context.font = font
				// 绘制文本，Y坐标递增
				context.fillText(font, LEFT_COLUMN_X, (y += DELTA_Y))
			})

			// 重置Y坐标
			y = 0

			// 绘制右列所有文本
			RIGHT_COLUMN_FONTS.forEach(function (font) {
				context.font = font
				context.fillText(font, RIGHT_COLUMN_X, (y += DELTA_Y))
			})
		</script>
	</body>
</html>