文字渲染基础
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=;
canvas.height=;
var context=canvas.getContext('2d');
context.font="bold 20px Arial"
context.fillStyle="#058"
context.fillText("Hello canvas！",,)
}
context.strokeText(string,x,y,[maxlen])
string指定位置，(x,y)指定位置
context的strokeStyle属性适用字体
maxlen可选，表示绘制这段文字最长的宽度
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=;
canvas.height=;
var context=canvas.getContext('2d');
context.font="bold 20px Arial"
context.lineWidth=
context.stroke="#058"
context.strokeText("Hello canvas！",,)
}
context.strokeText("Hello canvas！",,,)
//设置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=;
canvas.height=;
var context=canvas.getContext('2d');
context.fillStyle="#058"
context.font="bold 20px Arial"
context.fillText("Hello canvas！",,)
context.font="small-caps bold 20px Arial"
context.fillText("Hello canvas！",,)
}
有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=;
canvas.height=;
var context=canvas.getContext('2d');
context.fillStyle="#058"
context.font="bold 20px Arial"
context.textAlign="left"
context.fillText("Hello canvas！",,)
context.textAlign="center"
context.fillText("Hello canvas！",,)
context.textAlign="right"
context.fillText("Hello canvas！",,)
//辅助线
context.strokeStyle="#888"
context.moveTo(,)
context.lineTo(,)
context.stroke()
}
垂直对齐
context.textBaseline=top middle bottom alphabetic(Defualt) (基于拉丁语) ideographic（基于汉字） hanging（基于印度语）
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=;
canvas.height=;
var context=canvas.getContext('2d');
context.fillStyle="#058"
context.font="bold 20px Arial"
context.textAlign="left"
context.fillText("Hello canvas！",,)
context.textAlign="center"
context.fillText("Hello canvas！",,)
context.textAlign="right"
context.fillText("Hello canvas！",,)
context.strokeStyle="#888"
context.moveTo(,)
context.lineTo(,)
context.stroke()
}
这样也能理解filltext()的(x,y)
alphabetic(Defualt) (基于拉丁语) ideographic（基于汉字） hanging（基于印度语） 测试
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=;
canvas.height=;
var context=canvas.getContext('2d');
context.fillStyle="#058"
context.font="bold 20px Arial"
context.textBaseline="alphabetic"
context.fillText("中英文测试Hello canvas！",,)
context.strokeStyle="#888"
context.moveTo(,)
context.lineTo(,)
context.stroke()
context.textBaseline="ideographic"
context.fillText("中英文测试Hello canvas！",,)
context.strokeStyle="#888"
context.moveTo(,)
context.lineTo(,)
context.stroke()
context.textBaseline="hanging"
context.fillText("中英文测试Hello canvas！",,)
context.strokeStyle="#888"
context.moveTo(,)
context.lineTo(,)
context.stroke()
}
文本的度量
context.measureText(string).width
传入参数：字符串
返回的值：字符串的宽度
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=;
canvas.height=;
var context=canvas.getContext('2d');
context.fillStyle="#058"
context.font="bold 20px Arial"
context.fillText("Hello canvas！",,)
var textWidth=context.measureText("Hello canvas").width
context.fillText("以上字符宽度为"+textWidth+"px",,)
}
该文章是学习了慕课网上Canvas绘图详解而总结的学习笔记
http://www.imooc.com/learn/185
感谢老师！