dirtyHeight：矩形高度

function draw16(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = 'red' //在右下角画一个正方形 context.fillRect(250,250,150,50); var image = new Image(); image.src = "Image/html5.jpg"; image.onload = function () { //在左上角画一幅图片 context.drawImage(image, 0, 0,200,200); //实验证明imagedata取的是canvas所在范围画的图形，不止是图片 //不会取该区域内是空白的canvas的像素 var imagedata = context.getImageData(0, 0, 400, 300); //修改imagedata for (var i = 0, n = imagedata.data.length; i < n; i += 4) { imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red; imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; //blue //imagedata.data[i + 3] = 255 - imagedata.data[i + 3]; //a } context.putImageData(imagedata, 0, 0); } }

绘制文字  

填充文字：context.fillText(text,x,y)

绘制文字轮廓 context.strokeText(text,x,y)

text：要绘制的文字

x：文字起点的x坐标轴

y：文字起点的y坐标轴

context.font：设置字体样式

context.textAlign：水平对齐方式

start、end、right、center

context.textBaseline：垂直对齐方式

top、hanging、middle、alphabetic、ideographic、bottom

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()

在上面的裁剪图片提过，一旦设定了裁剪区域，后来绘制的图形都只显示裁剪区域内的内容，要“取消”这个裁剪区域才能正常绘制其他图形，其实这个“取消”是利用save（）方法和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重新绘制，下面给出“我弹、我弹、我弹弹弹”的代码 （额、名字而已）