[英]Canvas rotation doesn't work properly
我在嘗試通過JavascriptCanvas API旋轉矩形時遇到麻煩。
這是代碼:
G = {};
// get canvas context
G.ctx = document.getElementById('canvas').getContext('2d');
var x = 200;
var y = 100;
var w = 30;
var h = 70;
G.ctx.fillRect(x, y, w, h);
// Why is this not working??
G.ctx.save();
G.ctx.translate(x, y);
G.ctx.rotate(30*(Math.PI/180));
G.ctx.fillRect(x, y, w, h);
G.ctx.restore();
該代碼僅出於某種原因繪制第一個矩形。
這是JSfiddle: http : //jsfiddle.net/5YZbd/1/
任何澄清都非常歡迎!
我想到了。
一旦將畫布翻譯為矩形的x / y,其位置應稱為0/0,這就是平移后畫布原點所在的位置。
這是工作代碼:
G.ctx.save();
G.ctx.translate(x, y);
G.ctx.rotate(30*(Math.PI/180));
G.ctx.fillRect(0, 0, w, h);
G.ctx.restore();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.