canvas标签学习之文本

最新推荐文章于 2024-03-06 00:15:00 发布
最新推荐文章于 2024-03-06 00:15:00 发布
阅读量557 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linxiaoduo/article/details/80937521
版权

1.font属性

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.font = "40px Arial";
		ctx.fillText('hello world',10,50);
	</script>
</body>

font 属性设置或返回画布上文本内容的当前字体属性。

属性值

值描述
font-style

规定字体样式。可能的值：

  • normal
  • italic
  • oblique
font-variant

规定字体变体。可能的值：

  • normal
  • small-caps
font-weight

规定字体的粗细。可能的值：

  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size / line-height规定字号和行高，以像素计。
font-family规定字体系列。
caption使用标题控件的字体（比如按钮、下拉列表等）。
icon使用用于标记图标的字体。
menu使用用于菜单中的字体（下拉列表和菜单列表）。
message-box使用用于对话框中的字体。
small-caption使用用于标记小型控件的字体。
status-bar使用用于窗口状态栏中的字体。

2.textAlign属性

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.strokeStyle = 'blue';
		ctx.moveTo(150,20);
		ctx.lineTo(150,170);
		ctx.stroke();
		ctx.textAlign = 'start';
		ctx.fillText('textAlign=start',150,60);
		ctx.textAlign = 'end';
		ctx.fillText('textAlign=end',150,80);
		ctx.textAlign = 'left';
		ctx.fillText('textAlign=left',150,100);
		ctx.textAlign = 'center';
		ctx.fillText('textAlign=center',150,120);
		ctx.textAlign = 'right';
		ctx.fillText('textAlign=right',150,140);
	</script>
</body>

textAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。

通常，文本会从指定位置开始，不过，如果您设置为 textAlign="right" 并将文本放置到位置 150，那么会在位置 150 结束。

默认值：start
JavaScript 语法：context.textAlign="center|end|left|right|start";

3.textBaseline属性

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.strokeStyle = 'blue';
		ctx.moveTo(50,100);
		ctx.lineTo(395,100);
		ctx.stroke();
		ctx.textBaseline = 'top';
		ctx.fillText('textBaseline=top',5,100);
		ctx.textBaseline = 'bottom';
		ctx.fillText('textAlign=bottom',50,100);
		ctx.textBaseline = 'middle';
		ctx.fillText('textAlign=middle',120,100);
		ctx.textBaseline = 'alphabetic';
		ctx.fillText('textAlign=alphabetic',190,100);
		ctx.textAlign = 'hanging';
		ctx.fillText('textAlign=hanging',290,100);
	</script>
</body>

textBaseline 属性设置或返回在绘制文本时的当前文本基线。

下面的图示演示了 textBaseline 属性支持的各种基线：

文本基线图示

注释：fillText() 或 strokeText() 方法在画布上定位文本时，将使用指定的 textBaseline 值。

默认值：alphabetic
JavaScript 语法：context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

属性值

值描述
alphabetic默认。文本基线是普通的字母基线。
top文本基线是 em 方框的顶端。。
hanging文本基线是悬挂基线。
middle文本基线是 em 方框的正中。
ideographic文本基线是表意基线。
bottom文本基线是 em 方框的底端。

4.fillText()方法

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.font = '20px Georgia';
		ctx.fillText('hello world',10,50);
		
		ctx.font = '30px Verdana';
		var gra = ctx.createLinearGradient(0,0,c.width,0);
		gra.addColorStop('0','magenta');
		gra.addColorStop('0.5','blue');
		gra.addColorStop('1.0','red');
		ctx.fillStyle = gra;
		ctx.fillText('w3school.com.cn',10,90);
		
	</script>
</body>

fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。

提示：请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。

context.fillText(text,x,y,maxWidth);
参数描述
text规定在画布上输出的文本。
x开始绘制文本的 x 坐标位置（相对于画布）。
y开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth可选。允许的最大文本宽度，以像素计。

5.strokeText()方法

strokeText() 方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

提示：请使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本

context.strokeText(text,x,y,maxWidth);
参数描述
text规定在画布上输出的文本。
x开始绘制文本的 x 坐标位置（相对于画布）。
y开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth可选。允许的最大文本宽度，以像素计。

6.measureText()方法

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');		
		ctx.font = '30px Verdana';
		var txt = 'hello world';
		ctx.fillText('width:' + ctx.measureText(txt).width,10,50);
		ctx.fillText(txt,10,100);		
	</script>
</body>

measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。

提示：如果您需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法。

context.measureText(text).width;
参数描述
text要测量的文本。

linxiaoduo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas-文字
十里夜
02-06 738
canvas-文字 #canvas{ border: 1px solid palevioletred; } window.onload = function (){ //获取到canvas元素 var canvas = document.getElementBy
canvas实现文本上下标_Canvas专题—绘制数据扇形图（5）
weixin_29146701的博客
01-14 842
上一篇文章我们使用Canvas绘制了WiFi信号，对arc方法有一定的了解了。这篇我们添加一个工作中更加常用的场景-使用Canvas绘制数据扇形图。效果如下：分析扇形图如图所示，我们需要准备：一组数据包含：颜色，描述文字，金额。 以及arc方法。了解canvas文本方法：gd.font 设置为包含字体样式，大小和字体的字符串，并用空格分隔，gd.filltext("str",x,y) str为一...
Canvas实现文字云（标签云）效果，多浏览器支持
05-10
Canvas实现文字云（标签云）效果，多浏览器支持。 支持IE9及以上浏览器。 已封装为类。 原生代码，未用到其它js框架。
JSCanvasCallout:HTML5 画布的描述标注
07-04
JSCanvas 标注 createCanvasDescriptionCallout ( parameters ) 函数创建带有标注图像的画布。 参数 文本 字体 字体大小 文字颜色 文本对齐 最大宽度 填充 填充左 填充右 填充顶部 填充底部 边框宽度 边框颜色 背景颜色 利润 指针侧 指针宽度 指针开始 指针结束 例子 var cCallout = createCanvasDescriptionCallout ( { text : "Hello!!!" , fontSize : 15 , textAlign : "center" , padding : 20 , paddingTop : 10 , borderColor : "#AA5533" , backgroundColor : "#DDFFEE" , margin : 100 , pointerSide
HTML5 Canvas绘图之文字的渲染
Daisy花园
02-09 1万+
文字渲染基础context.font=”bold 40px Arial” font属性可以接受css的font属性context.fillText(string,x,y,[maxlen]) string指定位置，(x,y)指定位置 context的fillestyle属性设置字体属性 maxlen可选，表示绘制这段文字最长的宽度window.onload=function(){ v
HTML5 Canvas标签使用收录
09-28
HTML5 Canvas标签是网页开发中用于动态图形绘制的重要元素，其基本概念是在HTML5标准中引入的。这个标签提供了一个画布，允许开发者通过JavaScript API在网页上进行图像的绘制、合成以及创建动画。虽然HTML5规范还在...
js-richtext:用于 HTML Canvas 等的富文本编辑器
07-12
**标题解析：** "js-richtext" 是一个专门针对 HTML Canvas 的富文本编辑器，意味着它提供了一种在 Canvas ...在实际使用中，开发者需要结合项目需求，学习和应用这些概念来实现高效、用户体验良好的富文本编辑功能。
HTML5 Canvas入门学习教程
09-28
4. Canvas标签的使用： - Canvas是HTML5中新增的一个标签元素，用于在网页上绘制图形。 - 在HTML中添加Canvas非常简单，只需要在部分加入<canvas>标签即可。 - Canvas提供了脚本编程接口，通过JavaScript可以操作...
canvas学习
11-22
在这个“canvas学习”的压缩包中，你将找到关于canvas的基本语法和学习笔记，这对于想要掌握这个技术的前端开发者来说是非常宝贵的资源。 1. **Canvas元素** - `canvas`标签是HTML5中的一个新元素，用于在网页上...
canvas学习.zip
06-21
`canvas`标签是一个内联元素，通过JavaScript API与之交互。在HTML中声明`<canvas>`元素后，我们可以通过JavaScript的`document.getElementById`方法获取到这个元素，并通过`getContext`方法获取2D渲染上下文，这是...
html5 canvas学习--绘制文字
小鹏要逆袭的博客
10-07 1万+
1.绘制填充文字：context.fillText(text,x,y,[maxWidth]) function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.font = "italic 35px 黑体"; ctx.fillStyle = "Red";
小程序API能力集成指南——画布API汇总（三）
最新发布
IoT砖家
03-06 1204
关闭一个路径。会连接起点和终点。如果关闭路径后没有调用fill或者stroke并开启了新的路径，那之前的路径将不会被渲染。
三、初识Canvas---绘制文本/擦除canvas/使canvas填满浏览器窗口
码媛小洋的博客
08-23 1124
绘制文本/擦除canvas/使canvas填满浏览器窗口1、绘制文本2、擦除canvas3、使canvas填满浏览器窗口 1、绘制文本 context.fillText(文本名称，文本左下角x坐标，文本左下角y坐标) 除非有充分的理由不使用普通的HTML元素，否则一定不要在canvas中创建文本。 相反，应该使用普通的HTML元素创建文本，然后使用CSS定位到canvas之上。关键是使用HTML来处理文本内容，而使用canvas来处理像素和图形。 $(document).ready(function ()
【Web前端】5分钟掌握画布元素的使用
yubao0723的专栏
01-07 331
画布（canvas）是HTML5中新增加的一个非常重要的元素，通过使用它的API，来快速绘制一个中小学教学使用的工具。
实现canvas中的文本水平居中、垂直居中
我的博客
01-10 6437
环境：uniapp项目 一、view视图 <canvas style="width: 400px; height: 40px;" canvas-id="myCanvas" id="myCanvas"></canvas> 二、js代码 onReady(e) { var ctx = uni.createCanvasContext('myCanvas') ctx.font="16px Arial"; ctx.textAlign = "center"
认识ctx对象、ctx的方法
热门推荐
u012872771的博客
12-22 2万+
ctx.req 原生request对象 ctx.res 原生response对象 ctx.request koa的request对象 ctx.response koa的response对象 ctx.throw()抛异常： ctx.redirect()重定向 301永久重定向 302临时重定向 const Koa = require("koa")...
JavaScript 之 canvas（四）-- 绘制文字
一只小鹰
10-03 2万+
本文原文地址：https://www.jeremyjone.com/485/， 转载请注明，谢谢。 基本概念 在canvas中，为我们提供了一个非常方便的添加文字的方法，直接上 w3school 的文档说明： context.fillText(text,x,y,maxWidth); // text: 规定在画布上输出的文本。 // x: 开始绘制文本的 x 坐标位置（相对于画布）。 // y:...
Canvas beginPath()、moveTo()、 lineTo() 、stroke() 绘制直线路径，fillText() 绘制填色的文本
蚩尤后裔-汪茂雄
12-07 5939
目录 直线路径 API 方法 绘制路径编码示例 canvas fillText() 填充文本 直线路径 API 方法 beginPath() 方法 beginPath() 方法开始一条路径，或重置当前的路径。 提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。 提示...
textBaseline
weixin_30493401的博客
07-03 325
<!DOCTYPE html><html><body> <canvas id="myCanvas" width="400" height="200" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas...
HTML5 Canvas入门：绘制线条与文本
在HTML文档中，我们需要先定义一个`<canvas>`标签，并设置它的`width`和`height`属性，以便指定画布的尺寸。例如： ```html <canvas id="myCanvas" width="578" height="200"></canvas> ``` 接着，我们可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值