应用旋转时，HTML5 画布剪辑()在 Chrome 中不起作用

HTML5 canvas clip() doesn#39;t work in Chrome when rotation is applied(应用旋转时，HTML5 画布剪辑()在 Chrome 中不起作用)

问题描述

我正在尝试在画布上使用剪辑区域，一旦坐标系旋转任何非零值，它就会停止工作:

I'm trying to use a clip region on a canvas and it stops working as soon as the coordinate system is rotated by any non zero value:

   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="aHR0cHM6Ly9kbC5kcm9wYm94dXNlcmNvbnRlbnQuY29tL3UvNDExMTk2OS90ZXN0LnBuZw==">

代码在 Firefox 中运行良好:

The code works fine in Firefox:

但在 Chrome 中，矩形内的图像是空的:

But in Chrome the image inside the rectangle is empty:

平移和缩放转换似乎可以正常工作，但旋转却不行.难道我做错了什么?如果这是 Chrome 中的错误，有没有好的解决方法?

Translate and scale transformations seem to work fine, but not the rotate. Am I doing something wrong? If it's a bug in Chrome, is there a good workaround?

我的系统是:Chrome版本 49.0.2623.87 m"，Windows 7 Home Premium SP1，ASUS R7 250X 显卡.我每次都能重现这个问题.

My system is: Chrome "Version 49.0.2623.87 m", Windows 7 Home Premium SP1, ASUS R7 250X graphics card. I can reproduce the problem every time.

我发现如果我在浏览器设置中关闭硬件加速，问题就会消失.据我了解，这意味着我的显卡驱动程序可能存在问题.

I found that the problem goes away if I turn off hardware acceleration in the browser settings. As I understand this means there's probably a problem with my graphics card driver.

有没有办法让我的网页强制在 Chrome 中呈现软件?

Is there a way for my webpage to force the software rendering in Chrome?

推荐答案

问题似乎与浏览器硬件加速有关.关闭后一切正常.

The problem seems to be related to the browser hardware acceleration. Everything works fine as soon as I turn it off.

但是，我不知道我的网页是否可以禁用硬件加速.

However, I don't know if it's possible for my web page to disable hardware acceleration.

这篇关于应用旋转时，HTML5 画布剪辑()在 Chrome 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！