html5 canvas的基本操作

导出在canvas元素上绘制的图像

var drawing = document.getElementById('drawing')
// 是否支持canvas
if(drawing.getContext){
  // 取得图像数据URI
  var imgURI = drawing.toDataURL('image/png')
  // 显示图像
  var image = document.createElement('img')
  img.src = imgURI
  document.body.appendChild(image)
}

文本的度量

由于绘制文本比较复杂,特别是需要把文本控制在某一区域内部的时候,canvas提供了measureText(),该方法接收一个参数,即:需要绘制的文本,返回一个TextMetrics对象,该对象有一个width属性.假设我们想要在140像素宽的矩形区域中绘制文本”hello world”,我们可以从100px字体大小开始递减,最终找到合适的字体大小.

var fontSize = 100
context.fontSize = fontSize + 'px Arial'

while(context.measureText('hello world').width > 140){
  fontSize--
  context.font = fontSize + 'px Arial'
}

context.fillText('hello world',10,10)
context.fillText('Font size is ' + fontSize + 'px',10,50)

状态的保存和还原

我们说canvas是基于状态的,那么如何保存和还原状态呢?我们可以调用save()方法,当时所有的设置都会进入一个栈结构,可以对上下文进行其他的修改,当需要回到之前的设置(绘图上下文和变换)时,可以调用restore()在保存设置的栈结构中向前返回一级,恢复之前的状态.连续调用save()可以把更多的设置项保存到栈结构中,之后连续调用restore()可以逐级返回.