Canvas--文字渲染

1、使用font属性设置文字的样式属性。默认值为：20px sans-serif

　　font 属性使用的语法与 CSS font 属性 相同。

　　context.font = 'font-style font-variant font-weight font-size font-family'

　　　　font-style : normal (默认) || italic (斜体字) || oblique (倾斜字体)

　　　　font-variant : normal (默认) || small-caps (将小写英文字母转换为和小写字母一样大小的大写字母)

　　　　font-weight : lighter || normal ||bold || bolder || 100~900

　　　　font-size : 20px (默认)

　　　　font-family : 可以设置多种备选字体，支持@font-face

2、fillText(text,x,y,[maxWidth]) 和 strokeText(text,x,y,[maxWidth])

　　text----在画布上输出的文本。

　　 x ----开始绘制文本的 x 坐标位置。

　　 y ----开始绘制文本的 y 坐标位置。

　　[maxwidth]----可选。允许的最大文本宽度，单位：像素。

 1 // 第一行
 2 const grd = context.createLinearGradient(50,50,60,50)
 3 grd.addColorStop(0,'#a1c4fd')
 4 grd.addColorStop(1,'#c2e9fb')
 5
 6 context.beginPath()
 7 context.fillStyle = grd
 8 context.font = 'bold 50px Arial'
 9 context.fillText('Hello',50,50)
10
11 // 第二行
12 context.beginPath()
13 context.lineWidth = 1
14 context.strokeStyle = '#0091db'
15 context.font = 'bold 50px Arial'
16 context.strokeText('Hello',50,100)
17
18 // 第三行
19 context.beginPath()
20 context.lineWidth = 1
21 context.strokeStyle = '#0091db'
22 context.font = 'bold 50px Arial'
23 context.strokeText('Hello',50,150,100)
24
25 // 第四行
26 const IMAGE = new Image();
27 IMAGE.src = 'wood.jpg';
28 IMAGE.onload = function() {
29   var pattern = context.createPattern(IMAGE, 'repeat');
30   context.beginPath()
31   context.fillStyle = pattern;
32   context.font = 'bold 50px Arial'
33   context.fillText('Hello',50,200)
34 }
35
36 // 第五行
37 const IMAGE1 = new Image();
38 IMAGE1.src = 'wood.jpg';
39 IMAGE1.onload = function() {
40   var pattern = context.createPattern(IMAGE1, 'repeat');
41   context.beginPath()
42   context.fillStyle = pattern;
43   context.strokeStyle = '#0091db'
44   context.font = 'bold 50px Arial'
45   context.fillText('Hello',50,250)
46   context.strokeText('Hello',50,250)
47 }

3、文本对齐

　　水平方向对齐：

　　context.textAlign = left || center || right

　　文本对齐的基准为给定的初始坐标值。

 1 // 第一行
 2 const grd = context.createLinearGradient(50,50,60,50)
 3 grd.addColorStop(0,'#a1c4fd')
 4 grd.addColorStop(1,'#c2e9fb')
 5
 6 context.beginPath()
 7 context.fillStyle = grd
 8 context.textAlign = 'left'
 9 context.font = 'bold 50px Arial'
10 context.fillText('Left',150,50)
11
12 // 第二行
13 context.beginPath()
14 context.lineWidth = 1
15 context.strokeStyle = '#0091db'
16 context.textAlign = 'center'
17 context.font = 'bold 50px Arial'
18 context.strokeText('Center',150,100)
19
20 // 第三行
21 const IMAGE = new Image();
22 IMAGE.src = 'wood.jpg';
23 IMAGE.onload = function() {
24   var pattern = context.createPattern(IMAGE, 'repeat');
25   context.beginPath()
26   context.fillStyle = pattern;
27   context.textAlign = 'right'
28   context.font = 'bold 50px Arial'
29   context.fillText('Right',150,150)
30 }

　　垂直方向对齐：

　　context.textBaseline = top || middle || bottom || alphabetic (默认，针对英文) || ideographic (针对汉字、日文) || hanging (针对印度字体)

 1 const baseLine =(ctx,y)=>{
 2     ctx.beginPath()
 3     ctx.moveTo(0,y)
 4     ctx.lineTo(ctx.canvas.width,y)
 5     ctx.strokeStyle = '#333'
 6     ctx.stroke()
 7 }
 8
 9 // 第一行
10 const grd = context.createLinearGradient(50,50,60,50)
11 grd.addColorStop(0,'#a1c4fd')
12 grd.addColorStop(1,'#c2e9fb')
13
14 context.beginPath()
15 context.fillStyle = grd
16 context.textBaseline = 'top'
17 context.font = 'bold 50px Arial'
18 context.fillText('Top',150,50)
19 baseLine(context,50)
20
21 // 第二行
22 context.beginPath()
23 context.lineWidth = 1
24 context.strokeStyle = '#0091db'
25 context.textBaseline = 'middle'
26 context.font = 'bold 50px Arial'
27 context.strokeText('Middle',150,150)
28 baseLine(context,150)
29
30 // 第三行
31 const IMAGE = new Image();
32 IMAGE.src = 'wood.jpg';
33 IMAGE.onload = function() {
34   var pattern = context.createPattern(IMAGE, 'repeat');
35   context.beginPath()
36   context.fillStyle = pattern;
37   context.textBaseline = 'bottom'
38   context.font = 'bold 50px Arial'
39   context.fillText('Bottom',150,250)
40   baseLine(context,250)
41 }

4、文本的度量

　　context.measureText(string).width

　　根据当前所设置的font属性，返回string在canvas中的宽度

 1 context.beginPath()
 2 context.fillStyle = '#a1c4fd'
 3 context.font = 'bold 50px Arial'
 4 context.textAlign = 'center'
 5 context.fillText('Hello', context.canvas.width / 2, 50)
 6
 7 const WIDTH = parseInt(context.measureText('Hello').width)
 8
 9 context.beginPath()
10 context.fillText(`Hello在canvas中的宽度为${WIDTH}px`, context.canvas.width / 2, 100)

转载于:https://www.cnblogs.com/yin-1841/p/7798372.html

Canvas--文字渲染相关推荐

H5 canvas基础入门到捕鱼达人小游戏实现(3)-canvas运动入门,渐变,文字渲染,阴影
上一篇主要讲解了矩形柱状图,弧形和饼图的绘制,但是离我们的目标还是有点远,不要紧,我们基础api都还没有学习完,今天继续. 本节主要内容 - canvas画板制作 - 块的直线运动 - 粒子运动 - ...
canvas 文字颜色_canvas 中普通动效与粒子动效的实现
(给前端大全加星标,提升前端技能) 作者:薄荷前端 https://github.com/BooheeFE/weekly/issues/26 canvas 用于在网页上绘制图像.动画,可以将其理解为画 ...
ae制h5文字动画_7款超华丽的HTML5 Canvas文字动画特效
本文作者html5tricks,转载请注明出处文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就 ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
OpenGL text rendering文字渲染的实例
OpenGL text rendering文字渲染先上图,再解答. 完整主要的源代码源代码剖析先上图,再解答. 完整主要的源代码 #include <iostream> #inclu ...
图片渲染延迟_2D Canvas 的渲染优化
简介 HTML 上的图形渲染主要有两种方案 SVG 和 Canvas,前者更易于使用,而后者潜力更大,本文主要关注如何使用 Canvas 绘制出更多的图形,提供更加流畅的交互.本文的内容有: 渲染机制 ...
canvas需要gpu_【前端冷知识】你了解Canvas的渲染上下文吗？
做前端的同学应该都知道,Canvas是浏览器中很重要的一个绘图元素,使用它可以绘制2D图形或者3D图形,要绘制2D或3D图形时,需要获取不同的上下文,最常用的两个上下文是2d上下文和webgl上下文. ...
OpenGL基础55：文字渲染
一.FreeType库 FreeType是一个能够提供多种字体相关的操作的软件开发库,往往使用它来做最简单的文字渲染: OpenGL环境配置(超全整合版)FreeType库可以从这篇文章中的链接中下载 ...
canvas文字旋转功能
功能实现:使canvas文字围绕其中心点旋转思路平移画布,使画布中心点和文字的中心点重合(画布中心点默认在左上角点) 重新计算文字的起始点坐标效果图 <!DOCTYPE html> ...
Canvas 文字对齐方式
Canvas 文字对齐方式常用的画文字的方法 public void drawText (String text, float x, float y, Paint paint) x,y 并不是指定文 ...

Canvas--文字渲染

Canvas--文字渲染相关推荐

最新文章

热门文章