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>html5 cavans的小应用
原文地址：https://www.cnblogs.com/moon-yyl/p/9074782.html