wkiwi的博客

小程序canvas绘制文字

发布时间:6年前热度: 5296 ℃评论数:

代码如下

  1. ctx.fillText() 在画布上绘制“被填充的”文本
  2. ctx.strokeText() 在画布上绘制文本(无填充)
  3. ctx.measureText() 返回包含指定文本宽度的对象

1 ctx.font(); 设置或返回文本内容的当前字体属性

2 ctx.textAlign = 'start|end|center|left|right'


代码如下

  1. textAlign 设置或返回文本内容的当前对齐方式
  2. start : 默认。文本在指定的位置开始。
  3. end : 文本在指定的位置结束。
  4. center: 文本的中心被放置在指定的位置。
  5. left : 文本左对齐。
  6. right : 文本右对齐。


3 ctx.textBaseline = 'alphabetic|top|hanging|middle|ideographic|bottom'

代码如下

  1. alphabetic : (默认)文本基线是普通的字母基线。
  2. top : 文本基线是 em 方框的顶端。
  3. hanging : 文本基线是悬挂基线。
  4. middle : 文本基线是 em 方框的正中。
  5. ideographic: 文本基线是em基线。
  6. bottom : 文本基线是 em 方框的底端。

4 文字阴影和模式范围

代码如下

  1. ctx.shadowColor
  2. ctx.shadowBlur(模糊级数)
  3. ctx.shadowOffsetX
  4. ctx.shadowOffsetY

代码如下

  1. eg:绘制文字
  2. var canvas = document.getElementById('canvas');
  3. var ctx = canvas.getContext('2d');
  4. ctx.fillStyle = "red";
  5. ctx.font = "60px '微软雅黑'";
  6. ctx.textAlign = "left";
  7. //shadowBlur:模式级数
  8. ctx.shadowBlur = 10;
  9. ctx.shadowOffsetX = 5;
  10. ctx.shadowOffsetY = 5;
  11. ctx.shadowColor = "black";
  12. //fillText("要添加的文字",x0坐标,y0坐标)
  13. ctx.strokeText("You jump! I jump!",50,100);
  14. ctx.fillText("You jump! I jump!",50,100);
  15. ctx.fillText("rose~jack",50,200);


小程序,canvas绘制文字,uniapp,打卡圈

您看完此新闻的心情是
收藏文章
表情删除后不可恢复,是否删除
取消
确定
图片正在上传,请稍后...
评论内容为空!
还没有评论,快来抢沙发吧!

热评话题

按钮 内容不能为空!
立刻说两句吧! 查看0条评论

手机扫码访问

Scan me!