javascript - 使用 ctx.drawImage 显示对象数组内的图像-6ren

javascript - 使用 ctx.drawImage 显示对象数组内的图像

转载作者：行者123 更新时间：2023-12-03 07:45:08

26

4

它不显示图像，我尝试了所有可能的方法，但无法弄清楚如何。我该怎么办:

1) 如何创建一个新的对象object('20','X',250,100,'img');并指定我要使用哪张图片呢？ img.player 或 img.player.src 或只是 img？2) 如何迭代 objectArray 将它们全部显示在 Canvas 中？

15index.html: 38 Uncaught TypeError: Failed to execute 'drawImage'
on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
</head>

<body>

  <canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>

  <script>
    var WIDTH = 500;
    var HEIGHT = 500;
    var ctx = document.getElementById("ctx").getContext("2d");
    ctx.font = '30px Arial';

    var img = {};

    img.player = new Image();
    img.player.src = "FireMonster.png"

    var objectArray = {};

    function object(id, name, x, y, img) {

      var object3 = {
        x: x,
        y: y,
        name: name,
        id: id,
        img: img,

      };

      objectArray[id] = object3;
    }

    object('20', 'X', 250, 100, 'img');
    object('21', 'P', 150, 150, 'img');

    drawingObject = function(something) {

      ctx.drawImage(something.img, something.x, something.y);

    }

    update = function() {

      for (var x in objectArray) {

        drawingObject(objectArray[x]);

      }
    }


    setInterval(update, 40);
  </script>
</body>

</html>

最佳答案

您正在将 'img' 文本传递给 object function 而不是 Image 对象。试试这个:

object('20', 'X', 250, 100, img.player);
object('21', 'P', 150, 150, img.player);

关于javascript - 使用 ctx.drawImage 显示对象数组内的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35240186/

26

4

0

文章推荐： terminology - 简单图论术语问题

文章推荐： amazon-web-services - 使用静态列表作为 Cloudformation 参数

文章推荐： common-lisp - lisp 基本递归函数。帮我追踪一下

javascript - 应该在 ctx.lineTo 之前使用 ctx.moveTo
我无法在 mdn(我知道这不是官方引用)或其他任何地方找到它；所以，我想我会问这个简单的问题: 例如，我有以下片段: var can = document.getElementById("can");
jquery - 将 ctx.strokeStyle 与 ctx.fillStyle 一起使用
我正在制作动画，使用 Canvas 根据百分比用颜色填充矩形。我能够做到这一点，但内部广场必须有 border-bottom 和 border-right。我正在使用 ctx.strokeStyle
go - ctx.Err() vs ctx.Done() chan 关闭检查 : Is there a difference?
我处于一个长期运行的可取消函数中，该函数具有一个永久循环。我需要检查上下文是否关闭。 go func(){ for { if ctx.Err() != nil { retu
java - 为什么在 Netty 用户指南中调用 ctx.write() 后没有调用 ctx.flush() ？
在netty Java文档中说所以一旦你想要请求刷新就一定要调用flush()，但是在这个例子中它说没有需要调用ctx.flush()。但我没有发现 flush(ChannelHandlerConte
java - Netty 示例中 ctx.read() 与 ctx.channel.read() 的使用
Netty 的管道(即 ctx.foo() 与 ctx.channel.foo())之前已在 StackOverflow 上解释过两次: Any difference between ctx.writ
java - netty 中的 ctx.write() 和 ctx.channel().write() 有什么区别？
我注意到 ctx 与处理程序不同，例如，即使这些处理程序位于同一管道中也是如此 p.addLast("myHandler1", new MyHandler1()); p.addLast
netty - 在 Netty 4 中，ctx.close 和 ctx.channel.close 有什么区别？
有什么区别吗？是 ctx.close只是 ctx.channel.close 的较短版本? 最佳答案假设我们在管道中有三个处理程序，它们都拦截 close()操作，并调用 ctx.close()在里
node.js - 为什么我的 ctx.request.files 未定义，而 ctx.request.body 可以？
我正在尝试使用 koa-body 解析简单表单中的数据，但在后请求处理中我只能访问 ctx.request.body ，但不能访问 ctx.request.files 。我尝试了几个选项来解决这个问题
go - 我应该在 hystrix.Do 的 hystrix-go 包的运行参数中使用哪个 ctx？来自上层的 ctx，还是 context.Background()？
其中ctx我应该在 run 中使用吗？ hystrix.Do的参数hystrix-go的功能包裹？ ctx从上层，还是 context.Background()？谢谢。 package main i
node.js - 使用 request-promise 时无法设置 Koajs 的 ctx.status 和 ctx.body
我目前正在编写对 Shopify 应用进行身份验证的手动设置，类似于 NodeJS and Express 中的设置方式。。对于该应用程序，我使用 NodeJS 和 Koa框架。我也在使用@koa/
c - "ctx"是什么意思？
我已经看到它已经在不同的库中作为缩写使用了两次，但我无法理解它的含义。例如这里: static int reformat_string(void * ctx, const unsigned char
nodejs.ReferenceError: ctx is not defined解决方法
【现象】 2022-01-17 18:32:26,958 ERROR 18500 [-/::1/-/1ms GET /findOne/1] nodejs.ReferenceError: ctx is
nestjs - ctx.switchToHttp 不是函数
我正在使用 nestjs 并且我试图创建一个自定义装饰器: import { createParamDecorator, ExecutionContext } from '@nestjs/common
javascript - ctx.fillText 不绘制连接
出于某种原因，当客户端连接到服务器时，ctx.fillText 不想绘制任何内容。控制台正在正确记录所有内容，因此该功能可以正常工作，但 Canvas 有点愚蠢。这是服务器端代码的一部分: io.s
javascript - 为什么Koa ctx.body在if语句中不起作用？
我正在尝试在带有koa和postgresql的节点中创建post RestApi。我有一个唯一的电子邮件验证，并且想检查电子邮件是否存在，它应该显示该邮件已经存在的消息用户。我的查询正在工作，但是ct
ElasticSearch 更新脚本 : what does ctx mean?
curl -XPOST 'localhost:9200/customer/external/1/_update?pretty' -d ' { "script" : "ctx._source.age
javascript - ctx.drawImage 仅绘制图像的一半
我正在尝试加载图像然后将其绘制到 Canvas 上，但目前我只能渲染一半图像: var image = new Image(); image.crossOrigin = 'Anonymous'; im
javascript - Howler + ctx 分析器问题
我正在尝试将音频分析器节点连接到我的啸叫器设置。问题是我得到一个由“128”填充的数组，这意味着没有声音，但声音正在播放。这是我的代码: var Sound = new Howl({
javascript - ctx Canvas 图像从底部减少宽度
我使用下面的代码在 Canvas 中绘制了图像，其中我将元素图像与折叠的杯子图像组合在一起 canvas2(getFullElementImage); function canvas2(getFull
javascript - ctx.fillRect 值更改不起作用
这是 JS http://jsfiddle.net/T2zsM/我只能在单击增量时更改 ctx.fillRect 的值，但它不适用于减量。 var Canvas = document.getEleme

首页

博学

6Ren·AI

商城

javascript - 使用 ctx.drawImage 显示对象数组内的图像