1. 程式人生 > >HTML5 Canvas繪圖之文字的渲染

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

文字的對齊

水平對齊
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)

}

這裡寫圖片描述