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

本文介绍了应用旋转时，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="https://dl.dropboxusercontent.com/u/4111969/test.png">

代码在 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?

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

问题描述

推荐答案

相关文档推荐