var length=context.measureText(text):计算字体长度(px)，那么能不能计算高度啊，很遗憾，不能。。。

function draw17(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0,0,400,300); context.fillStyle = "#00f"; context.font = "italic 30px sans-serif"; context.textBaseline = 'top'; //填充字符串 var txt="fill示例文字" context.fillText(txt, 0, 0); var length=context.measureText(txt); context.fillText("长" + length.width + "px", 0, 50); context.font = "bolid 30px sans-serif"; txt = "stroke示例文字"; length = context.measureText(txt); context.strokeText(txt,0,100); context.fillText("长" + length.width + "px", 0, 150); }

保存和恢复状态

保存：context.save()

恢复：context.restore()

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

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

function draw18(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "red"; context.save(); //保存了当前context的状态 context.fillStyle = "black"; context.fillRect(0, 0, 100, 100); context.restore();//恢复到刚刚保存的状态 context.fillRect(0,120,100,100); }

保存文件 canvas.toDataURL(MIME)

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

function draw19(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "rgb(0,0,225)"; context.fillRect(0, 0, canvas.width, canvas.height); context.fillStyle = "rgb(255,255,0)"; context.fillRect(10, 20, 50, 50); //把图像保存到新的窗口 var w=window.open(canvas.toDataURL("image/jpeg"),"smallwin","width=400,height=350"); }

结合setInterval制作动画

基本原理就是定时清除整个canvas重新绘制，下面给出“我弹、我弹、我弹弹弹”的代码 ，小矩形在矩形区域移动，碰到矩形区域的边缘反弹

function draw20(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); var interal = setInterval(function () { move(context); }, 1); } var x = 100;//矩形开始坐标 var y = 100;//矩形结束坐标 var mx = 0;//0右1左 var my = 0; //0下1上 var ml = 1;//每次移动长度 var w = 20;//矩形宽度 var h = 20;//矩形高度 var cw = 400;//canvas宽度 var ch = 300; //canvas高度 function move(context) { context.clearRect(0, 0, 400, 300); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); context.fillStyle = "red"; context.fillRect(x, y, w, h); if (mx == 0) { x = x + ml; if (x >= cw-w) { mx = 1; } } else { x = x - ml; if (x <= 0) { mx = 0; } } if (my == 0) { y = y + ml; if (y >= ch-h) { my = 1; } } else { y = y - ml; if (y <= 0) { my = 0; } } }

上一篇：移动 Web 开发技巧之（后续），web开发技巧