canvas文本操作

canvas的文本操作没有那么多内容就一篇文章介绍完毕吧!

简单文本操作:

代码如下:

canvas id="canvas" width="900" height="500"></canvas>
		<script type="text/javascript">
			//获得画板
			var c=document.getElementById("canvas");
			//获得绘画环境
			//ps:线条样式在fillText和strokeText之前声明
			var cv=c.getContext('2d');
//			cv.font="80px 华文彩云";
//			cv.fillStyle='yellow';
//			cv.fillText('十月梦想,梦想起航',150,200,1000);
//			
//			cv.fill();
			//空心文本操作
			cv.font="40px 隶书";
			cv.strokeStyle='greenyellow';
			cv.strokeText('十月梦想,2018梦想起航',10,80,1000);
			cv.stroke();
		</script>

fill相关实心文字操作,stroke相关是空心,和之前的大体类似!

context.font="字体大小  字体类型"定义了文本的属性,

context.fillstyle='文本填充颜色';指定实心文字的填充色,

contetx.fillText('需要写入画板的文字',left,top,maxwidth);指定了写入画板的文字,文字所处画板的位置left,top,最后一个可选参数,文本最大的宽度,文本宽度超过会进行压缩,可以不写该属性!

空心文字写入画板,把fill换成stroke;


对齐方式:

代码如下:

<canvas id="canvas" width="900" height="500"></canvas>
		<script type="text/javascript">
			//获得画板
			var c=document.getElementById("canvas")
			//获得绘画环境
			var cv=c.getContext('2d');
			//绘制参考线
//			水平线
			cv.beginPath();//开启路径
			cv.strokeStyle='white';
			cv.lineWidth=3;
			cv.moveTo(0,300);
			cv.lineTo(900,300);
			cv.stroke();
			//垂直线,
			cv.beginPath();//开启路径
			cv.strokeStyle='white';
			cv.lineWidth=3;
			cv.moveTo(300,0);
			cv.lineTo(300,500);
			cv.stroke();
			//文字属性设置
			cv.font="35px 宋体";
			cv.fillStyle="aqua";
			cv.textAlign='center';//基线在文字的什么位置,lift,中间,right默认left
			cv.textBaseline="buttom";//基线在文字的上,下,中间,默认bottom
			cv.fillText('突如其来的装逼让我无法呼!',300,300,1000);
			cv.fill();
		
			
		</script>

需要制定文字参考线对于参考

参考线绘制完成后制定文本对齐方式

水平对齐方式cv.textAlign取值left,right,center,默认left

垂直方向对齐cv.textBaseline取值有top,bottom,middle,默认bottom

ps:对齐方式说明,取值的对齐方式与位置相反,即水平取值left,文本在右侧,垂直取值top文本在下面,可以简单理解,取值与文本的实际文字相反,另一种就是取什么值哪个参考线在文本什么方向


获取文本实际宽度

contetx.measure()方法获取文本宽度,具体使用如下

context.measureText('获取宽度的文本,也可以指定存放文本的字符串').width

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏james大数据架构

简单的jquery拖曵原理js特效实例

<!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="javascript" src...

26370
来自专栏向治洪

React Native之ScrollView控件详解

概述 ScrollView在Android和ios原生开发中都比较常见,是一个 滚动视图控件。在RN开发中,系统也给我们提供了这么一个控件。不过在RN开发中 ,...

72070
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——VoiceRecorder控件的使用方式.Net移动开发

      设置控件是否生成成员变量,将该属性设置为“True”,则该控件能被其他方法引用,如图6;

13930
来自专栏前端知识分享

第43天:事件对象event

一、事件对象 事件:onmouseover、 onmouseout、 onclick event //事件的对象

10910
来自专栏前端知识分享

第53天:鼠标事件、event事件对象

-->鼠标事件 -->event事件对象 -->默认事件 -->键盘事件(keyCode) -->拖拽效果

14520
来自专栏IMWeb前端团队

Bootstrap基本入门大全

Bootstrap 是基于 HTML、CSS、JAVASCRIPT的,它简洁灵活,使得 Web 开发更加快捷。 重点的是你要理解这个框架的运行机制,了解了它是怎...

266100
来自专栏极客编程

html5 canvas 与小丑。

  以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后,Web动画就一下子从云端跌落到了地面——任何一个Web程序...

9620
来自专栏吴老师移动开发

【iOS开发】iOS 动画详解

在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

29760
来自专栏编程心路

Bootstrap学习文档(二)

Bootstrap 中把一些标签的样式重置了,也即是为一些标签设置了带有 Bootstrap 风格的样式,如 h 标签,p 标签等等,这其中包含了 HTML5 ...

17750
来自专栏编程直播室

Canvas2D画线和面1.Html中的画布2.渲染上下文3.画一个方块4.画一条线

17320

扫码关注云+社区

领取腾讯云代金券