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
感谢老师！