canvas中心旋轉、中心縮放

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);
相關文章
相關標籤/搜索