1、中心旋轉
效果:canvas
代碼:app
var canvas = document.createElement('canvas'); canvas.width = 500; canvas.height = 500; canvas.style.backgroundColor = '#ddd'; document.body.appendChild(canvas); var ctx = canvas.getContext('2d'); var x = 100, y = 100, width = 150, height = 150, angle = 90, rectCenterPoint = {x: x+width/2, y: y+height/2}; // 矩形中心點 // 旋轉前(紅色矩形) ctx.fillStyle = '#f00'; ctx.fillRect(x, y, width, height); // 旋轉後(綠色矩形) ctx.translate(rectCenterPoint.x, rectCenterPoint.y); ctx.rotate(angle); ctx.translate(-rectCenterPoint.x, -rectCenterPoint.y); ctx.fillStyle = '#690'; ctx.fillRect(x, y, width, height);
2、中心縮放
效果:spa
代碼:code
var canvas = document.createElement('canvas'); canvas.width = 500; canvas.height = 500; canvas.style.backgroundColor = '#ddd'; document.body.appendChild(canvas); var ctx = canvas.getContext('2d'); var x = 100, y = 100, width = 150, height = 150, rectCenterPoint = {x: x+width/2, y: y+height/2}, // 矩形中心點 scaleX = 0.5, scaleY = 0.4; // 縮放前(紅色矩形) ctx.fillStyle = '#f00'; ctx.fillRect(x, y, width, height); // 縮放後(綠色矩形) ctx.translate(rectCenterPoint.x*(1-scaleX), rectCenterPoint.y*(1-scaleY)); ctx.scale(scaleX, scaleY); ctx.fillStyle = '#690'; ctx.fillRect(x, y, width, height);