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

我需要這個(gè),因?yàn)槲蚁朐诋?huà)布上渲染懸停疊加層.

我創(chuàng)建了一個(gè)代表我的代碼的小提琴：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)我評(píng)論出這條線

// ctx.rotate(angle);

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

我做錯(cuò)什么了嗎？或者這可能是Chrome中的一個(gè)錯(cuò)誤？

編輯：可能不是Chrome中的錯(cuò)誤,因?yàn)榇藴y(cè)試頁(yè)在Mac上使用chrome：

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

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

閱讀那里的信息,當(dāng)你在較小的畫(huà)布上畫(huà)畫(huà)時(shí),問(wèn)題就會(huì)“解決”.

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

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

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

你有沒(méi)有人知道這個(gè)解決方案所以我可以使用Chrome上的chrome在畫(huà)布上繪制和重繪矩形？

我對(duì)此感到瘋狂.

總結(jié)

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

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