前端入门学习笔记十二

最新推荐文章于 2024-03-06 00:15:00 发布

物恰冰可乐

最新推荐文章于 2024-03-06 00:15:00 发布

阅读量116

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/m0_65384293/article/details/128039752

版权

本文介绍了HTML5 Canvas中用于绘制文本的fillText()和strokeText()方法，以及如何通过font属性设置字体样式，用textAlign和textBaseline属性控制文本对齐和基线。通过这些方法，可以在画布上创建出丰富多样的文本效果。

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

<!DOCTYPE html>
 <html>
	 <head>
		 <meta charset = "UTF-8"/>
		 <title>fillText()</title>
	 </head>
	 <body>
	 	<canvas id = "canvas" width = "300px" height = "1314px">
			前端
		</canvas>
		<script type = "text/javascript">
			var myCanvas = document.getElementById("canvas");
			var ctx = myCanvas.getContext("2d");
			ctx.fillText("HTML",10,50);
		</script>
	 </body>
 </html>

fillText():

fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色
请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本
JavaScript 语法：
context.fillText(text,x,y,maxWidth);
text   规定在画布上输出的文本
x   开始绘制文本的 x 坐标位置（相对于画布）
y   开始绘制文本的 y 坐标位置（相对于画布）
maxWidth   可选。允许的最大文本宽度，以像素计

<!DOCTYPE html>
  <html>
	  <head>
		  <meta charset = "UTF-8"/>
		  <title>strokeTex

最低0.47元/天解锁文章

物恰冰可乐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端入门学习笔记十二

前端入门学习笔记
复制链接

扫一扫

专栏目录