[英]HTML5 canvas clip() doesn't work in Chrome when rotation is applied
我正在嘗試在畫布上使用剪輯區域，一旦坐標系被任何非零值旋轉，它就會停止工作：
window.onload = function() { var canvas = document.getElementById("mainCanvas"); var ctx = canvas.getContext("2d"); ctx.rotate(Math.PI / 8); // !!! Clipping doesn't work with any non zero value ctx.beginPath(); ctx.rect(0, 0, canvas.width, canvas.height); ctx.stroke(); ctx.clip(); // !!! Image below is invisible in Chrome when clip() is enabled var objectImage = document.getElementById("test"); ctx.drawImage(objectImage, 0, 0); } <canvas id="mainCanvas" width="320" height="240" style = "border:1px solid #d3d3d3;"></canvas> <img id="test" width="0" height="0" src="https://dl.dropboxusercontent.com/u/4111969/test.png">
該代碼在 Firefox 中運行良好：
但在 Chrome 中，矩形內的圖像是空的：
平移和縮放轉換似乎工作正常，但不是旋轉。 難道我做錯了什么？ 如果這是 Chrome 中的錯誤，是否有好的解決方法？
編輯：
我的系統是：Chrome“Version 49.0.2623.87 m”，Windows 7 Home Premium SP1，ASUS R7 250X 顯卡。 我每次都可以重現這個問題。
我發現如果我在瀏覽器設置中關閉硬件加速，問題就會消失。 據我了解，這意味着我的顯卡驅動程序可能有問題。
有沒有辦法讓我的網頁強制在 Chrome 中進行軟件渲染？
在 Chrome 中，drawImage() 在 Image 加載之前完成，你必須像這樣檢查：
<!DOCTYPE HTML> <html> <script> window.onload = function() { var canvas = document.getElementById("mainCanvas"); var ctx = canvas.getContext("2d"); ctx.rotate(Math.PI / 8); // !!! Clipping doesn't work with any non zero value ctx.beginPath(); ctx.rect(0, 0, canvas.width, canvas.height); ctx.stroke(); ctx.clip(); //Make sure the Image is loaded var objectImage= new Image(); objectImage.src="https://dl.dropboxusercontent.com/u/4111969/test.png" objectImage.onload =function() { ctx.drawImage(objectImage, 0, 0); } } </script> <body> <img id="test" width="0" height="0" src="https://dl.dropboxusercontent.com/u/4111969/test.png"> <canvas id="mainCanvas" width="320" height="240" style = "border:1px solid #d3d3d3; margin:0; padding:0"></canvas> </body> </html>
問題似乎與瀏覽器硬件加速有關。 一旦我關閉它，一切都正常。
但是，我不知道我的網頁是否可以禁用硬件加速。
HTML5 Draggable setDragImage不適用於Chrome上的畫布
[英]HTML5 Draggable setDragImage doesn't work with canvas on Chrome
當窗口較大時，HTML5 Canvas Alpha透明度在Firefox的曲線中不起作用
[英]HTML5 Canvas alpha transparency doesn't work in firefox for curves when window is big
畫布-在Firefox中剪輯圖像並“復合”使用復合操作無法像Chrome中那樣工作
[英]Canvas - clip image and use composite operation “multiply” in Firefox doesn't work as in Chrome
帶有Canvas的HTML5 / JavaScript文件無法在Windows 8上與Chrome和Firefox一起使用，但適用於Windows 7上的所有瀏覽器。為什么？
[英]HTML5/JavaScript File with Canvas doesn't work with Chrome&Firefox on windows 8 but works with all browsers on windows 7. why?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.