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

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

我創(chuàng)建了一個代表我的代碼的小提琴：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.

當(dāng)我評論出這條線

// ctx.rotate(angle);

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

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

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

編輯2：我一直在做更多的研究,我發(fā)現(xiàn)這個問題記錄：link

我?guī)е鴾y試小提琴,并添加了一些旋轉(zhuǎn)畫布元素的測試：link

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

看到我的小提琴的結(jié)果：

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

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

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

我對此感到瘋狂.

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。