我试图在画布上使用剪辑区域，一旦坐标系旋转任何非零值，它就会停止工作：
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 中的错误，有没有好的解决方法？
Edit:
我的系统是：
Chrome“版本 49.0.2623.87 m”、Windows 7 Home Premium SP1、华硕 R7 250X 显卡。我每次都能重现这个问题。
我发现如果我这样做，问题就会消失关闭硬件加速在浏览器设置中。据我了解，这意味着我的显卡驱动程序可能有问题。
有没有办法让我的网页强制在 Chrome 中进行软件渲染？
在 Chrome 中，drawImage() 是在加载图像之前完成的，你必须像这样检查：
<!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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
