HTML5 Canvas绘图之文字的渲染

文字渲染基础

context.font=”bold 40px Arial”

font属性可以接受css的font属性

context.fillText(string,x,y,[maxlen])

string指定位置，(x,y)指定位置

context的fillestyle属性设置字体属性

maxlen可选，表示绘制这段文字最长的宽度

window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
context.font="bold 20px Arial"
context.fillStyle="#058"
context.fillText("Hello canvas！",40,100)
}

context.strokeText(string,x,y,[maxlen])

string指定位置，(x,y)指定位置

context的strokeStyle属性适用字体

maxlen可选，表示绘制这段文字最长的宽度

window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
context.font="bold 20px Arial"
context.lineWidth=1
context.stroke="#058"
context.strokeText("Hello canvas！",500,100)
}

context.strokeText("Hello canvas！",500,100,100)
//设置maxlen，可以强行压缩文字

当然也可以加其他的效果：渐变，背景填充等

可以fillText()和strokeText()同时使用

文字渲染进阶

字型、字号、字体

font

默认值“ 20px sans-serif”

context.font=

font-style font-variant font-weight font-size font-family

font-style：
normal（defualt）
italic（斜体字）
oblique（倾斜字体）

通常情况，在网页中看不出italic和oblique的区别，oblique是简单的将字体倾斜。如果设计一套字体的时候有专门给它设置italic，那么可能和oblique不一样

font-variant

normal

small-caps 只有在使用英文小写字母时才能看出差别

看一下区别

window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
context.fillStyle="#058"
context.font="bold 20px Arial"
context.fillText("Hello canvas！",500,100)

context.font="small-caps bold 20px Arial"
context.fillText("Hello canvas！",500,300)
}

有small-caps属性的字母都变成大写

font-weight

lighter

normal

bold

bolder

最新的w3c标准，九个等级：

100,200,300,400(normal),500,600,700(bold),800,900

font-size

设置字号

font-size:20px ,1em

font-family

字体的选项

设置多种字体备选

支持@font-face

web安全字体

http://www.runoob.com/cssref/css-websafe-fonts.html

文本的对齐

水平对齐

context.textAlign=left , center , right

window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
context.fillStyle="#058"
context.font="bold 20px Arial"
context.textAlign="left"
context.fillText("Hello canvas！",500,200)

context.textAlign="center"
context.fillText("Hello canvas！",500,300)

context.textAlign="right"
context.fillText("Hello canvas！",500,400)
//辅助线
context.strokeStyle="#888"
context.moveTo(500,0)
context.lineTo(500,500)
context.stroke()
}

垂直对齐

context.textBaseline=top middle bottom alphabetic(Defualt) (基于拉丁语) ideographic（基于汉字） hanging（基于印度语）

window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
context.fillStyle="#058"
context.font="bold 20px Arial"
context.textAlign="left"
context.fillText("Hello canvas！",500,200)

context.textAlign="center"
context.fillText("Hello canvas！",500,300)

context.textAlign="right"
context.fillText("Hello canvas！",500,400)

context.strokeStyle="#888"
context.moveTo(500,0)
context.lineTo(500,500)
context.stroke()
}

这样也能理解filltext()的(x,y)

alphabetic(Defualt) (基于拉丁语) ideographic（基于汉字） hanging（基于印度语） 测试

window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
context.fillStyle="#058"
context.font="bold 20px Arial"
context.textBaseline="alphabetic"
context.fillText("中英文测试Hello canvas！",500,200)

context.strokeStyle="#888"
context.moveTo(0,200)
context.lineTo(800,200)
context.stroke()

context.textBaseline="ideographic"
context.fillText("中英文测试Hello canvas！",500,300)
context.strokeStyle="#888"
context.moveTo(0,300)
context.lineTo(800,300)
context.stroke()

context.textBaseline="hanging"
context.fillText("中英文测试Hello canvas！",500,400)
context.strokeStyle="#888"
context.moveTo(0,400)
context.lineTo(800,400)
context.stroke()
}

文本的度量

context.measureText(string).width

传入参数：字符串

返回的值：字符串的宽度

window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
context.fillStyle="#058"
context.font="bold 20px Arial"
context.fillText("Hello canvas！",500,100)

var textWidth=context.measureText("Hello canvas").width
context.fillText("以上字符宽度为"+textWidth+"px",500,300)

}

该文章是学习了慕课网上Canvas绘图详解而总结的学习笔记

http://www.imooc.com/learn/185

感谢老师！