canvas里的文本基本操作

基本效果如图

唯一需要注意的是 context.save()和context.restore()的应用
这里为了不影响背景图 所以用save和restore

var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")
var fillCheckbox   = document.getElementById('fillCheckbox')
var strokeCheckbox = document.getElementById('strokeCheckbox')
var shadowCheckbox = document.getElementById('shadowCheckbox')
var text="HTML5";

function draw(){
   context.clearRect(0,0,canvas.width,canvas.height)

   drawBackground()

   if(shadowCheckbox.checked){
       context.save()
    turnShadowsOn()
    drawText()
    context.restore()
   }else{
    context.save()
    turnShadowsOff()
    drawText()
    context.restore()
   }
   
}

function drawBackground(){
   var step_y=12
   var i=step_y*4
  
   while(i