Canvas javascript drawImage方法

结果:无法将图片加载到画布上。我得到的是白色的矩形,知道为什么吗?我想我可以直接从变量中调用draw方法,比如说:bg.draw,还是说我需要在canvas上重新绘制图像并重新运行bg.draw?

const cvs = document.getElementById("firstplatform");
const ctx = cvs.getContext("2d");

// GAME VARS AND CONSTS
let frames = 0;

// LOAD IMAGE
const sprite = new Image();
sprite.src = "img/sprite.png";

//BACKGROUND
const bg = {
  sX: 0,
  sY: 0,
  w: 275,
  h: 226,
  x: 0,
  y: cvs.height - 226,


  draw: function () {
    ctx.drawImage(
      sprite,
      this.sX,
      this.sY,
      this.w,
      this.h,
      this.x,
      this.y,
      this.w,
      this.h
    );
    ctx.drawImage(
      sprite,
      this.sX,
      this.sY,
      this.w,
      this.h,
      this.x + this.w,
      this.y,
      this.w,
      this.h
    );
  },
};

// DRAW
bg.draw();`

下面是index.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Game</title>
    <link href="https://fonts.googleapis.com/css?family=Teko:700" rel="stylesheet">
    <style>        
        canvas{
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="firstplatform" width="320" height="480"></canvas>


    <script src="game.js"></script>
</body>
</html>

解决方案:

你需要等待图像加载后才能将其绘制到画布上。所以,wrap bg.draw 的onload处理程序中。

sprite.onload = function()
{
  bg.draw();
}

const cvs = document.getElementById("firstplatform");
const ctx = cvs.getContext("2d");

// GAME VARS AND CONSTS
let frames = 0;

// LOAD IMAGE
const sprite = new Image();
sprite.src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27";

//BACKGROUND
const bg = {
  sX: 0,
  sY: 0,
  w: 275,
  h: 226,
  x: 0,
  y: cvs.height - 226,


  draw: function () {
    ctx.drawImage(
      sprite,
      this.sX,
      this.sY,
      this.w,
      this.h,
      this.x,
      this.y,
      this.w,
      this.h
    );
    ctx.drawImage(
      sprite,
      this.sX,
      this.sY,
      this.w,
      this.h,
      this.x + this.w,
      this.y,
      this.w,
      this.h
    );
  },
};

sprite.onload = function()
{
  bg.draw();
}
<canvas id="firstplatform" width="320" height="480"></canvas>

给TA打赏
共{{data.count}}人
人已打赏
未分类

正确使用结构常量(使用动态值)。

2022-9-8 22:00:36

未分类

当使用position:absolute时,无法将文本居中。

2022-9-8 22:00:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索