View Code

1 function draw17(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) ; 5 var context = canvas.getContext("2d"); 6 context.fillStyle = "#EEEEFF"; 7 context.fillRect(0,0,400,300); 8 context.fillStyle = "#00f"; 9 context.font = "italic 30px sans-serif"; 10 context.textBaseline = 'top'; txt="fill示例文字" 13 context.fillText(txt, 0, 0); 14 var length=context.measureText(txt); 15 context.fillText("长" + length.width + "px", 0, 50); 16 context.font = "bolid 30px sans-serif"; 17 txt = "stroke示例文字"; 18 length = context.measureText(txt); 19 context.strokeText(txt,0,100); 20 context.fillText("长" + length.width + "px", 0, 150); 21 }

保存和恢复状态

保存：context.save()

恢复：context.restore()

    在上面的裁剪图片提过，一旦设定了裁剪区域，后来绘制的图形都只显示裁剪区域内的内容，要“取消”这个裁剪区域才能正常绘制其他图形，其实这个“取消”是利用save（）方法和restore（）方法来实现的。

    context.save()：调用该方法，会保存当前context的状态、属性（把他理解成游戏存档）

    context.restore():调用该方法就能恢复到save时候context的状态、属性（游戏回档）

View Code

1 function draw18(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) ; 5 var context = canvas.getContext("2d"); 6 context.fillStyle = "red"; context.fillStyle = "black"; 9 context.fillRect(0, 0, 100, 100); context.fillRect(0,120,100,100); 12 }

保存文件  canvas.toDataURL(MIME)

      在canvas中绘出的图片只是canvas标签而已，并非是真正的图片，是不能右键，另存为的，我们可以利用canvas.toDataURL()这个方法把canvas绘制的图形生成一幅图片，生成图片后，就能对图片进行相应的操作了。

View Code

1 function draw19(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) ; 5 var context = canvas.getContext("2d"); 6 context.fillStyle = "rgb(0,0,225)"; 7 context.fillRect(0, 0, canvas.width, canvas.height); 8 context.fillStyle = "rgb(255,255,0)"; 9 context.fillRect(10, 20, 50, 50); w=window.open(canvas.toDataURL("image/jpeg"),"smallwin","width=400,height=350"); 12 }

结合setInterval制作动画

      基本原理就是定时清除整个canvas重新绘制，下面给出“我弹、我弹、我弹弹弹”的代码 （额、名字而已）

      小矩形在矩形区域移动，碰到矩形区域的边缘反弹