canvas绘制文本&文本的

最新推荐文章于 2024-05-18 09:35:06 发布

时光无声￡

最新推荐文章于 2024-05-18 09:35:06 发布

阅读量1.5k

点赞数

分类专栏： canvas 文章标签： javascript canvas

本文链接：https://blog.csdn.net/weixin_44586981/article/details/119110714

版权

本文介绍了在canvas中如何绘制文本，包括fillText和strokeText方法。还详细讲解了文本样式的设置，如font属性和textBaseline属性的用法，以及如何实现文本的水平垂直居中和添加阴影效果。

摘要由CSDN通过智能技术生成

在canvas中绘制文本

canvas 提供了两种方法来渲染文本:
fillText(text, x, y)
在指定的(x,y)位置填充指定的文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
     
				margin: 0;
				padding: 0;
			}
			html,body{
     
				height: 100%;
				overflow: hidden;
			}
			body{
     
				background: pink;
			}
			#test{
     
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
     
			var canvas = document.querySelector("#test");
			if

最低0.47元/天解锁文章

时光无声￡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制文本&文本的

在canvas中绘制文本 canvas 提供了两种方法来渲染文本: fillText(text, x, y) 在指定的(x,y)位置填充指定的文本<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; paddin
复制链接

扫一扫

专栏目录