问题标签 [drawimage]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
3593 浏览

jquery - 使用缓冲区中的 drawImage 更新画布不要使用 drawImage 应用操作

我使用缓冲方法来更新画布,问题是当我在缓冲画布中绘制图像并将其应用于真实画布时,真实画布上没有图像。但我可以将其他任何东西应用到真正的画布上。

这是我的代码:

0 投票
4 回答
2199 浏览

html - canvas isPointInPath 不适用于 ctx.drawImage()

  1. 我想这不起作用,因为画布正在绘制矢量的位图(并且位图不是路径)。
  2. 即使它确实有效,位图也可能总是有一个矩形许可器。

有没有办法isPointInPath在使用时利用类似的东西drawImage

例子:

  • 顶部画布是使用绘制的drawImageisPointInPath但不起作用。
  • 底部画布是使用arcisPointInPath作品绘制的。

我的证明的链接

** 编辑 **

我在一个画布上画了一个圆圈,并isPointInPath用来查看鼠标指针是否在圆圈内(在我的示例中为底部画布)。我还使用 .将底部画布“复制”到顶部画布drawImage。请注意,这isPointInPath在顶部画布上不起作用(很可能是由于我上面提到的原因)。是否有一种解决方法可以用于任何类型的路径(或位图)?

0 投票
1 回答
100 浏览

html - HTML5:尝试将画布复制到另一个画布时出现未知错误

我不知道如何使 drawImage 工作......它什么都不做(除了它抛出一个带有未定义描述的异常):

我有 2 个画布,一个是图层,另一个是用于使用鼠标绘制的。我想将用户在第一个画布上绘制的内容保存到图层并应用不透明度......我不会给你所有代码,但你必须知道以下代码有效:

但我不能将不透明度与前一个一起使用,因此正如在其他 stackoverflow.com 相关问题中所建议的那样,我想将 drawImage 与画布元素一起使用。

ctx是我的画布cvs的上下文,
layerCtx是我的画布层的上下文

0 投票
5 回答
67129 浏览

html - 将 PNG 绘制到画布元素 - 不显示透明度

我正在尝试使用 drawImage 在画布元素上绘制半透明 PNG。但是,它将图像绘制为完全不透明的。当我查看正在加载的资源并在浏览器中加载实际的 PNG 时,它会显示透明度,但当我在画布上绘制它时,它不会。有任何想法吗?

这是代码:

0 投票
3 回答
3881 浏览

javascript - 循环创建具有多个图像的多个画布并不总是显示图像

这可能是一个奇怪的解释:我想动态创建一个画布集合,其中将包含一个图像。这会显示(经过很多麻烦并摆脱了 onload 事件)但是当我尝试刷新页面时,有时屏幕上什么也没有。当我使用 onload 事件(等到图像加载完毕)时,它不会显示或显示最后一个画布中的所有内容。

这是代码片段:

我看过很多看起来像我的帖子并尝试了很多但无济于事。

0 投票
2 回答
774 浏览

javascript - 尝试动态更改 context.clip(); 在 HTML5 画布中

我正在尝试动态更改 context.clip(); 在 HTML5 画布中,从数组中绘制具有不同值的形状。这个想法是让棋盘游戏的不同部分一个接一个地被照亮,剪下一个较暗版本的棋盘,只看到一个更清晰版本的正方形。

这是我正在努力解决的代码,基于该站点的其他问题,但我真的找不到错误:

我的编码很糟糕吗?我一直在改变写作方式,尽量不使用eval()等,但没有成功......

一如既往地感谢您的帮助!

拉蒙

PD-对不起我的英语!

0 投票
1 回答
1162 浏览

html - 尝试使用Canvas和DrawImage以90度显示低码率视频

我想以 2 帧/秒的速度显示旋转的摄像机视频。以下代码显示旋转 90 度的 240 x 320 图像。除非我刷新浏览器,否则图像不会更新。正在更改的源是 cam_1.jpg。似乎一旦 DrawImage 有一个 src 图像,它确实会寻找更新。

我还没有学到什么?感谢您的时间和专业知识。

0 投票
0 回答
1879 浏览

java - BufferedImageOp 代表什么?

我只是想放大一个BufferedImage并在上面做一个水印。这是我的代码。

在 'g2.drawImage(image, BufferedImageOp, 0, 0);'。我不知道是什么BufferedImageOp。有人可以举个例子吗?

谢谢你。

0 投票
1 回答
994 浏览

javascript - HTML5 Canvas 随机绘制图像

在编程方面我是个菜鸟,所以请耐心等待并指出我需要提供的任何其他信息。我正在使用 Javascript 和 HTML5 画布制作游戏。在当前阶段,我调用两个图像并将它们分配给对象。它使用贯穿更新和渲染函数及其子函数的基本循环。

两者都通过单独的渲染函数进行操作,其变量由更新函数操作,而变量又由 keyPress 事件操作。刷新时,玩家图像显示和行为都很好 - 但导弹完全随机显示。

检查键:

更新导弹(update() 的子函数):

渲染导弹(render() 的子函数):

编辑:我目前正在处理多项任务,所以我将整个内容上传到 www.techgoldmine.com

0 投票
2 回答
769 浏览

javascript - 在带有视频的函数中使用 Canvas 和 Drawimage

我正在使用 HTML5 画布和 DrawImage 函数来显示低速率视频。tnt 给出了很好的建议来让这个项目起步:尝试使用 Canvas 和 DrawImage 以 90 度显示低速率视频

虽然通过使用 onload 函数在加载时知道相机和角度时 tnt 的解决方案工作正常,但我需要能够在多个相机之间关闭和打开视频并更改其他参数。为了处理这个问题,需要一些单独的函数,但我无法首先在相机上执行 setInterval,然后将不断变化的图像传递给 DrawImage。'cam_1.jpg' 是下例中的视频。下面 body onload 中显示的函数也必须在运行时由其他例程调用。任何建议将被认真考虑。

谢谢你。