canvas画布写文字:fillText()

绘制文本

ctx.font = ‘微软雅黑’ 设置字体
strokeText()
fillText(text,x,y,maxWidth)
- text 要绘制的文本
- x,y 文本绘制的坐标（文本左下角）
- maxWidth 设置文本最大宽度，可选参数
ctx.textAlign文本水平对齐方式，相对绘制坐标来说的
- left
- center
- right
- start 默认
- end
ctx.direction属性css(rtl ltr) start和end于此相关
- 如果是ltr,start和left表现一致
- 如果是rtl,start和right表现一致
ctx.textBaseline 设置基线（垂直对齐方式）
- top 文本的基线处于文本的正上方，并且有一段距离
- middle 文本的基线处于文本的正中间
- bottom 文本的基线处于文本的证下方，并且有一段距离
- hanging 文本的基线处于文本的正上方，并且和文本粘合
- alphabetic 默认值，基线处于文本的下方，并且穿过文字
- ideographic 和bottom相似，但是不一样
measureText() 获取文本宽度obj.width

//绘制一段文字

var ctx = document.querySelector("canvas").getContext("2d");var w = ctx.canvas.width;var h = ctx.canvas.height;//文字var txt = "好冷好冷";//绘制水平垂直线ctx.beginPath();ctx.moveTo(0, h / 2 - 0.5);ctx.lineTo(w, h / 2 - 0.5);ctx.moveTo(w /2 , 0);ctx.lineTo(w /2, h );ctx.strokeStyle = "#eee";ctx.stroke();//绘制文本ctx.beginPath();ctx.font = "40px Microsoft YaHei";//水平对齐方式ctx.textAlign = "center";//垂直对齐方式ctx.textBaseline = "middle";ctx.fillText(txt, w / 2, h / 2);//画下划线和文字一样长ctx.beginPath();var width = ctx.measureText(txt).width;ctx.moveTo(w / 2 - width / 2, h / 2 + 20);ctx.lineTo(w / 2 + width / 2, h / 2 + 20);ctx.strokeStyle = "#000";ctx.stroke();

效果图

canvas画布写文字:fillText()相关推荐

js将文字填充与canvas画布再转为图片
需求:封装consul服务的webUI: 原因:展示consul的服务信息时,需要嵌套动画,由于其没有内置的icon,所以将服务name放于图片位: 分析:展示信息时采用了卡片式的服务布局,缩放式的服 ...
uniapp canvas 图片加上文字合成一张新图并保存到手机相册
uniapp canvas 图片加上文字合成一张新图并保存到手机相册背景图上是奖章徽章,中间加上自定义文本,我这个图是因为背景图上原来就有字,随便找的,所以跟我写的文字层叠了具体实现代码 < ...
VUE+Canvas实现输入文字生成对应的字体图片小功能
你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...
2D/3D视图变换、canvas画布
1,2D图形变换图形变换主要通过transform css属性来达到图形的旋转.平移.和缩放旋转旋转中心(基准点)为中心点,deg是角度制单位 transform: rotate(45deg); ...
canvas制作动态文字颗粒动画
久违的想玩下,且回顾下canva颗粒动画制作,在codepen中找了个小案例,看了下源码,学习下,觉得很不错,拿出来给大家分享下: 一.最终预览效果: 二.核心代码逻辑 1. 初始化canvas画布大 ...
通过Canvas画布制作黑客帝国背景
通过Canvas画布制作黑客帝国背景电影介绍先推荐一下这部电影 <黑客帝国>是由华纳兄弟公司发行的系列动作片,该片由沃卓斯基兄弟执导,基努·里维斯.凯莉·安妮·莫斯.劳伦斯·菲什伯恩等 ...
微信小程序之canvas画布
一.前言只要干不死,就要往死干!!! 本次带来的是关于微信小程序之画布的相关功能,具体详见代码↓ 二.图例功能点:颜色选择.直线.矩形.圆形.画笔.输入框.线条宽度.还有特定图标.橡皮擦 .撤销. ...
LV2之-----canvas 画布实现自转时钟大转盘
canvas 画布运用实例:1.系统时钟 <!DOCTYPE html> <html lang="en"><head><meta char ...
三个绘图工具类详解Paint(画笔)Canvas(画布)Path(路径)
1)Paint(画笔): 就是画笔,用于设置绘制风格,如:线宽(笔触粗细),颜色,透明度和填充风格等直接使用无参构造方法就可以创建Paint实例: Paint paint = new Paint( ...

canvas画布写文字:fillText()

绘制文本

canvas画布写文字:fillText()相关推荐

最新文章

热门文章