简体   繁体   English

html5 canvas-图像显示

[英]html5 canvas - image display

I wrote the following code on my editor: 我在编辑器上编写了以下代码:

<!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>

The code is supposed to display image, but the the images are not display as the canvas is completely blank. 该代码应该显示图像,但是由于画布完全空白,因此无法显示图像。 Please tell me what I did wrong and thanks. 请告诉我我做错了什么,谢谢。

You should be creating a canvas and context object in a proper way 您应该以适当的方式创建画布和上下文对象

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

instead of 代替

canvas.document.getElementId("canvasArea");

and

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

instead of 代替

context.canvas.getContext("2d");
<!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>

Okay that's more like it, perhaps you should look into using dev tools in a browser and see if there are any errors, all I did is fire it up and just patch the console errors. 好的,更像是,也许您应该研究在浏览器中使用开发工具,看看是否有任何错误,我所做的就是启动它并修补控制台错误。 But still remains, all just spelling issues. 但是仍然存在,所有这些只是拼写问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM