Javascript 为什么我不'；在画布上画不出图像？_Javascript_Html_Image_Canvas

Javascript 为什么我不'；在画布上画不出图像？

javascript html image canvas

Javascript 为什么我不'；在画布上画不出图像？,javascript,html,image,canvas,Javascript,Html,Image,Canvas,没有错误，什么都没有。但是图像仍然没有显示出来。当Iconsole.log（后台）时我在控制台中看到图像的src，就像这样。代码如下： Html: Try应该调用draw on image onload事件，如下所示 var canvas=document.getElementById（“canvas”）； var context=canvas.getContext（“2d”）；变量样式表=函数（图像、宽度、高度）{ 这个图像=图像；这个。宽度=宽度；高度=高度； this.draw=函

没有错误，什么都没有。但是图像仍然没有显示出来。当I

console.log（后台）时

我在控制台中看到图像的src，就像这样

。代码如下：

Html:

Try应该调用draw on image onload事件，如下所示

var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
变量样式表=函数（图像、宽度、高度）{
这个图像=图像；
这个。宽度=宽度；
高度=高度；
this.draw=函数（图像、sx、sy、swidth、sheight、x、y、宽度、高度）{
image.onload=函数（）{
绘图图像（图像、sx、sy、swidth、SHIGHT、x、y、宽度、高度）；
}
}
}
变量加载器=函数（src）{
this.image=新图像（）；
this.image.src=src；
返回此.image；
}
var background=新加载程序（“https://pbs.twimg.com/profile_images/902653914465550336/QE3287ZJ_400x400.jpg");
控制台日志（后台）；
var sprite=新样式表（背景，50,50）；
绘制（背景，0,0,16,16,0,0,50,50）
Try应该调用draw on image onload事件，如下所示

var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
变量样式表=函数（图像、宽度、高度）{
这个图像=图像；
这个。宽度=宽度；
高度=高度；
this.draw=函数（图像、sx、sy、swidth、sheight、x、y、宽度、高度）{
image.onload=函数（）{
绘图图像（图像、sx、sy、swidth、SHIGHT、x、y、宽度、高度）；
}
}
}
变量加载器=函数（src）{
this.image=新图像（）；
this.image.src=src；
返回此.image；
}
var background=新加载程序（“https://pbs.twimg.com/profile_images/902653914465550336/QE3287ZJ_400x400.jpg");
控制台日志（后台）；
var sprite=新样式表（背景，50,50）；
绘制（背景，0,0,16,16,0,0,50,50）
请在中添加您的Html代码snippet@AlpeshJikadra Edited@Loktar@Thomas请在中添加您的Html代码snippet@AlpeshJikadra Edited@Loktar@Thomas
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pirate</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <canvas id="canvas" width="480" height="240"></canvas>
  <script src="./script.js"></script>
  </body>
</html>

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var StyleSheet = function(image, width, height) {
  this.image = image;
  this.width = width;
  this.height = height;

  this.draw = function(image, sx, sy, swidth, sheight, x, y, width, height) {
    context.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);
  }
}

var Loader = function(src) {
  this.image = new Image();
  this.image.src = src;
  return this.image;
}

var background = new Loader("ground.png");
console.log(background);
var sprite = new StyleSheet(background, 50, 50);
  sprite.draw(background, 0, 0, 16, 16, 0, 0, 50, 50);