View Code

1 function draw20(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) ; 5 var context = canvas.getContext("2d"); interal = setInterval(function () { 8 move(context); 9 }, 1); 10 } x = 100;y = 100;mx = 0;my = 0; ml = 1;w = 20;h = 20;cw = 400;ch = 300; 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 }

结语

     历时一天半，本来以为可以玩转的，写下来才发现要玩转canvas还需要很多的实践，这个道理应该是适用所有的技术的，做人啊，就得谦虚点。本文如有错误，请及时留言给我纠正，希望能给正在学canvas绘图的童鞋有所帮助

copyright © Tim demo下载