1.canvas鼠标画线，canvas小方块移动，canvas小方块旋转并缩放
<!doctype html> <html> <head> <meta charset="utf-8"> <title>绘制方块</title> <style> body{background:#000;} #c1{background:#fff;} span{background:#fff;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGc = oC.getContext('2d'); oGc.fillRect(0,0,100,100); var num = 0; setInterval(function(){ num++; oGc.clearRect(0,0,oC.width,oC.height); oGc.fillRect(num,num,100,100); },30); }; </script> </head> <body> <!--canvas 的宽高写在行间样式中是画布的大小，写在行间中就是等比缩放--> <canvas id="c1" width="400" height="400"> <span>不支持canvas</span> </canvas> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>小方块的缩放和旋转</title> <style> body{background:#000;} #cl{background:#fff;} span{background:#fff;} </style> <script> window.onload = function(){ var oC = document.getElementById('cl'); var oGc = oC.getContext('2d'); var num = 0 ; var value = 1; var num2 = 0; setInterval(function(){ num++; oGc.clearRect(0,0,oC.width,oC.height); oGc.save(); // 注意这个使用的地方，画布清掉的一开始就用 if(num2 == 100){ value = -1; }else if(num2 == 0){ value = 1; } num2 += value; oGc.translate(100,100); oGc.rotate(num*Math.PI/180); oGc.scale(num2*1/50,num2*1/50); oGc.translate(-50,-50); oGc.fillRect(0,0,100,100); oGc.restore(); },30); }; </script> </head> <body> <canvas id="cl" width="400" height="400"> <span>浏览器不支持canvas</span> </canvas> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body{background:#000;} #c1{background:#fff;} span{background:#fff;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGc = oC.getContext('2d'); oC.onmousedown = function(ev){ var ev = ev || window.event; oGc.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop); oC.onmousemove = function(ev){ var ev = ev || window.event; oGc.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop); oGc.stroke(); }; oC.onmouseup = function(){ oC.onmousemove = oC.onmouseup = null; }; return false; }; }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas</span> </canvas> </body> </html>