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，可