我一直在尋找很長一段時間,因為畫布元素上的旋轉矩形的繪制,擦除和重繪在Mac上的谷歌瀏覽器中不起作用.

我需要這個,因為我想在畫布上渲染懸停疊加層.

我創建了一個代表我的代碼的小提琴：link

HTML：

使用Javascript：

var canvas =null;

var ctx;

var target;

$(function() {

canvas=document.getElementById('canvas');

ctx = canvas.getContext('2d');

target = { h:81, id:"i1_2", isempty:false, r:-11.64, w:60, x:143, y:19, zindex:2};

});

function drawRectangle() {

ctx.save();

ctx.translate(target.x, target.y);

ctx.fillStyle = "green";

ctx.strokeStyle = "blue";

ctx.globalAlpha = 0.40;

ctx.rotate(target.r / 180 * Math.PI); //NO Rotation => It works!

ctx.fillRect(0,0,target.w,target.h);

ctx.restore();

}

function clearRectangle() {

ctx.clearRect(0,0,400,165);

}

這適用于Windows和Mac上的所有瀏覽器,除了Mac上的Chrome.

當我評論出這條線

// ctx.rotate(angle);

矩形在畫布上繪制. (當然沒有輪換)

我做錯什么了嗎？或者這可能是Chrome中的一個錯誤？

編輯：可能不是Chrome中的錯誤,因為此測試頁在Mac上使用chrome：

編輯2：我一直在做更多的研究,我發現這個問題記錄：link

我帶著測試小提琴,并添加了一些旋轉畫布元素的測試：link

閱讀那里的信息,當你在較小的畫布上畫畫時,問題就會“解決”.

看到我的小提琴的結果：

當我改變上面小提琴畫布的大小時,使它們只小1像素.然后結果還可以.

最后的結論：似乎我可以畫一次旋轉的矩形.但是當我使用clearRect方法擦除畫布時,我無法再次繪制矩形.僅當畫布的大小足夠大時才會發生這種情況. (大于65600px)

你有沒有人知道這個解決方案所以我可以使用Chrome上的chrome在畫布上繪制和重繪矩形？

我對此感到瘋狂.

總結

以上是生活随笔為你收集整理的chrome for mac html5,javascript – Mac上的Chrome浏览器问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。