个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试在 Canvas 上使用剪辑区域，但一旦坐标系旋转任何非零值，它就会停止工作:
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“版本 49.0.2623.87 m”、Windows 7 Home Premium SP1、ASUS 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>关于javascript - 应用旋转后，HTML5 canvas clip() 在 Chrome 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36026145/
25
4
0
我在 Eclipse 上制作了一个视频游戏，我将制作一首菜单歌曲并停止该歌曲，但 Clip.stop();不工作我不知道为什么请帮助我。菜单歌曲Clip.play();和Clip.loop(Clip.
我想制作一个类似于单元测试的框架，允许我为各个规则编写自定义测试。我希望每个测试都在它自己的文件中，即 test_R1.clp 将是规则 R1 的测试文件。每个测试都应该能够加载它自己的事实文件。我已
我注意到使用 clip 属性也会删除 box-shadow 属性。有没有办法在同一个元素上同时使用两者？ 一些背景:我为三种类型的产品设置了三列。每个产品都有一个图像，每个图像的大小都不同。我想标准化
我这里有一些代码，这让我很困惑；我想弄清楚为什么会出现空指针异常。我设置了一个 for-each-loop 来初始化每个剪辑。如果我自己初始化每一个，它就可以正常工作，并且可以播放剪辑。 musi
在我看来，Instance可以做到Fact可以做到的一切，Fact存在的意义是什么？换句话说，实例和事实有什么区别？有没有只能用Fact的情况？ 这让我很困扰，我搜索了很多但没有给我答案，有人可以帮助
我正在尝试循环播放一个小的“.wav”音频文件。我使用的代码运行良好，但我想在循环音频之间设置一些时间间隔。下面提供了代码。 try { // from a wave File
我对将 Clips 嵌入到 C 和 C++ 中的区别感到困惑。我已按照高级编程指南(第 4.17 章)中的步骤成功将 Clips 嵌入到 C 程序中现在，我想将 Clips 嵌入到 C++ 程序中，我
我正在编写一个小脚本，让用户可以将自定义图像加载到网页的 Canvas 中。到目前为止，效果非常好。 Canvas 使用 fabric.js 脚本进行初始化，以便让用户执行一些简单的编辑任务。 “上传
当我第一次启动 App Clip 时，iOS 决定自动显示应用横幅。我们的 App Clip 本质上是该应用的完整版本，因此我们不希望我们的用户立即升级到该应用。 有没有办法在启动时隐藏它？ 最佳答案
Sutherland-Hodgman 算法中解释了 4 条用于裁剪多边形的规则: 如果两个顶点都在裁剪区域内 - 保存第二个 如果第一个顶点在内部，第二个在外部 - 计算与裁剪区域边界的交点并保存 如
我创建了一个“登录页面”，它是一个影片剪辑。我的另一个页面是“主页”，这是另一个影片剪辑。所以我想做的是.. 我想将我的一个移动剪辑导航到另一个影片剪辑。和 `我不想使用时间线。 只需在actions
有人可以提供有关如何在 linux 环境中安装 clips 和 clipspy 的分步过程。 pip install clipspy 对我不起作用，因为我的组织不允许使用 pip。我需要从源代码构建。
我写了一个程序来断言这条规则的 LHS 中的事实: (defrule check-open-better (declare (salience 50)) ?f1 (assert (node
我有 10 个观察环境的传感器。如果正常，则传感器为 1，否则为 0。 如果至少有 3 个传感器处于 0 状态，我需要创建一个函数，它将向终端打印一条警告消息，并且消息警告只显示一次。这是我需要在剪辑
我正在尝试为示例规则绘制一个 Rete 网络，该规则在不同模式的变量之间没有绑定(bind)。我知道beta网络是用来确保不同模式下的弯曲变量是一致的。 (defrule R1 (type1 c1
我正在使用 剪辑 ( http://clipsrules.sourceforge.net/ ) 用于大学项目，但我无法直接从文件运行程序，在这种情况下，我不想使用提示插入 FACTS 和 RULES。
我想在运行规则时增加安全性。现在，它什么也没有改变。事实(human_resources n)确实存在。 (defglobal？security = 0) (第1条规则 (human_resource
[注意:寻找一个跨浏览器的解决方案，它不会在每一波 goo 之间瞬间闪烁 body 的背景，如 ccprog 的回答中所见；理想情况下，解决方案不应涉及等到第一波结束才开始显示第二波，以便两个波可以同
我在以下无法理解的代码中遇到错误 imgColor = cv2.imread(fileName, cv2.IMREAD_COLOR) imgColor1= cv2.cvtColor(imgColor,
我通过使用 CLIPSJNI 改编 WineDemo.clp 示例来尝试此操作。 (defmodule SEVERITY (import MAIN ?ALL) (exp
我是一名优秀的程序员,十分优秀！