Question

我在编辑器上写了以下代码：

<!DOCTYPE html><html><head><script>

window.onload = function()
{
  canvas.document.getElementId("canvasArea");
  context.canvas.getContext("2d");

  var smallImage = new Image();
  var largeImage = new Image();
  smallImage.src   = "https://vignette.wikia.nocookie.net/cardfight/images/a/a1/Co_dragon.gif/revision/latest?cb=20120103153023";
  largeImage.src = "https://vignette.wikia.nocookie.net/cardfight/images/8/89/De.jpg/revision/latest?cb=20130414214050";

  var smallImageXPos   = 40;    var smallImageYPos   = 55;
  var smallImagewidth  = 75;    var smallImageHeight = 75;
  var largeImageYPos   = 225;   var largeImageYPos   = 10;
  var sourceCropX      = 25;    var sourceCropY      = 25;
  var sourceCropWidthX = 50;    var sourceCropwidthY = 50;
  var imageWidth       = 80;    var imageHeight      = 80;

  context.shadowOffsetX = -3;   context.shadowOffsetY = 3;
  context.shadowBlur    = 8;    context.shadowColor   = "gray";

  smallImage.onload = function()
  {
    context.drawImage(smallImage, smallImageXPos, smallImageYPos);

    context.drawImage(smallImage, smallIMageXPos+80, smallImageYPos-25,
                  smallImageWidth, smallImageHeight);
  }

  largeImage.onload = function()
  {
    context.drawImage(largeImage, largeImageXpos, largeImageYpos);

    context.drawImage (largeImage, sourceCropX, sourceCropY, sourceCropWidthX, sourceCropWidthY, largeImageXPos+140, largeImageYPos+10, imageWidth, imageHeight);
  }
}
</script>
</head>
<body>
<div style = "width500px; height:125px; margin:0 auto; padding:5px">
<canvas id= "canvasArea" width= "500" height = "125" 
style="border:2px solid black">
</canvas>
</div>
</body>
</html>

代码应该显示图像，但由于画布完全空白，因此不显示图像。请告诉我我做错了什么，谢谢。

Answer 1

您应该以适当的方式创建画布和上下文对象

var canvas = document.getElementById('canvasArea');

而不是

canvas.document.getElementId("canvasArea");

和

var context = canvas.getContext('2d');

而不是

context.canvas.getContext("2d");

Answer 2

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div style="width: 500px; height:125px; margin:0 auto; padding:5px">
        <canvas id="canvasArea" width="500" height="125" style="border:2px solid black">
        </canvas>
    </div>
</body>
<script>

    window.onload = function () {
        var canvas = document.getElementById("canvasArea");
        var context = canvas.getContext("2d");

        var smallImage = new Image();
        var largeImage = new Image();
        smallImage.src = "https://vignette.wikia.nocookie.net/cardfight/images/a/a1/Co_dragon.gif/revision/latest?cb=20120103153023";
        largeImage.src = "https://vignette.wikia.nocookie.net/cardfight/images/8/89/De.jpg/revision/latest?cb=20130414214050";

        var smallImageXPos = 40; var smallImageYPos = 55;
        var smallImagewidth = 75; var smallImageHeight = 75;
        var largeImageXPos = 225; var largeImageYPos = 10;
        var sourceCropX = 25; var sourceCropY = 25;
        var sourceCropWidthX = 50; var sourceCropwidthY = 50;
        var imageWidth = 80; var imageHeight = 80;

        context.shadowOffsetX = -3; context.shadowOffsetY = 3;
        context.shadowBlur = 8; context.shadowColor = "gray";

        smallImage.onload = function () {
            context.drawImage(smallImage, smallImageXPos, smallImageYPos);

            context.drawImage(smallImage, smallImageXPos + 80, smallImageYPos - 25,
                smallImagewidth, smallImageHeight);
        }

        largeImage.onload = function () {
            context.drawImage(largeImage, smallImageYPos, smallImageYPos);

            context.drawImage(largeImage, sourceCropX, sourceCropY, sourceCropWidthX, sourceCropwidthY, largeImageXPos + 140, largeImageYPos + 10, imageWidth, imageHeight);
        }
    }
</script>

好吧，更喜欢它，也许你应该考虑在浏览器中使用开发工具，看看是否有任何错误，我所做的就是启动它，只是修补控制台错误。但仍然存在，只是拼写问题。

html5画布 - 图像显示

2 个答案: