玩转html5canvas画图(13)

时间：2018-11-26

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

copyright dedecms

内容来自dedecms

本文来自织梦

1 function draw19(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) 4 return false; 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); 10 //把图像保存到新的窗口 11 var w=window.open(canvas.toDataURL("image/jpeg"),"smallwin","width=400,height=350"); 12 }

本文来自织梦

结合setInterval制作动画
copyright dedecms

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

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

织梦内容管理系统

内容来自dedecms

dedecms.com

1 function draw20(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) 4 return false; 5 var context = canvas.getContext("2d"); 6 7 var interal = setInterval(function () { 8 move(context); 9 }, 1); 10 } 11 12 var x = 100;//矩形开始坐标 13 var y = 100;//矩形结束坐标 14 var mx = 0;//0右1左 15 var my = 0; //0下1上 16 var ml = 1;//每次移动长度 17 var w = 20;//矩形宽度 18 var h = 20;//矩形高度 19 var cw = 400;//canvas宽度 20 var ch = 300; //canvas高度 21 22 23 function move(context) { 24 context.clearRect(0, 0, 400, 300); 25 context.fillStyle = "#EEEEFF"; 26 context.fillRect(0, 0, 400, 300); 27 context.fillStyle = "red"; 28 context.fillRect(x, y, w, h); 29 if (mx == 0) { 30 x = x + ml; 31 if (x >= cw-w) { 32 mx = 1; 33 } 34 } 35 else { 36 x = x - ml; 37 if (x <= 0) { 38 mx = 0; 39 } 40 } 41 if (my == 0) { 42 y = y + ml; 43 if (y >= ch-h) { 44 my = 1; 45 } 46 } 47 else { 48 y = y - ml; 49 if (y <= 0) { 50 my = 0; 51 } 52 } 53 54 }

copyright dedecms

结语 内容来自dedecms

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