玩转html5canvas画图(12)

时间：2018-11-26

copyright dedecms

本文来自织梦

1 function draw17(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) 4 return false; 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'; 11 //填充字符串 12 var 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 } 织梦内容管理系统

copyright dedecms

内容来自dedecms

保存和恢复状态
copyright dedecms

保存：context.save()

织梦内容管理系统

恢复：context.restore()
本文来自织梦

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

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

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

1 function draw18(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) 4 return false; 5 var context = canvas.getContext("2d"); 6 context.fillStyle = "red"; 7 context.save(); //保存了当前context的状态 8 context.fillStyle = "black"; 9 context.fillRect(0, 0, 100, 100); 10 context.restore();//恢复到刚刚保存的状态 11 context.fillRect(0,120,100,100); 12 } 织梦好，好织梦

保存文件  canvas.toDataURL(MIME)

织梦好，好织梦

上一篇：傲剑狂刀出招表（键盘出招表+秘籍） 下一篇：写作文必学的六大修辞手法详解