Question

我试图将图片加载到画布上并且在尝试所有内容后仍然没有工作......

使用Javascript：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var start = new Image();

start.onload = function(){
     context.drawImage(start, 0, 0, start.width, start.height, 0, 0, 
     canvas.width, canvas.height);
     }

start.src = "hangman0.png";

我没有看到我的代码有任何问题，因为我正在尝试绘制此图像，然后缩放到画布上。宽度和高度，但无论如何，图片都不会出现。有什么指针吗？我试过更改我的HTML5和css代码，但仍无济于事。

CSS：

canvas{
     background-color: rgb(0,198,255);
     border-style: ridge;
     border-width: 5px;
     border-color: rgb(157,255,0);
     position: relative;
}

HTML5：

<body>
   <div id='section'>
      <canvas id='myCanvas' width='979px' height='560px'></canvas>
      <script src="projectJavaScript.js"></script>
   </div>
</body>

提前感谢您的帮助！

Answer 1

只要我使用window.onload：

，您提供的代码就适用于我

您是否将script代码包裹在window.onload内？

<script>
window.onload=(function(){

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var start = new Image();

    start.onload = function(){
         context.drawImage(start, 0, 0, start.width, start.height, 0, 0, 
         canvas.width, canvas.height);
         }

    start.src = "https://dl.dropboxusercontent.com/u/139992952/multple/rainy.png";

}); // end window.onload
</script>

示例代码和演示：

注意：StackSnippets会自动将JS脚本代码包装在window.onload中

＆＃13;

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var start = new Image();

start.onload = function(){
     context.drawImage(start, 0, 0, start.width, start.height, 0, 0, 
     canvas.width, canvas.height);
     }

start.src = "https://dl.dropboxusercontent.com/u/139992952/multple/rainy.png";

＆＃13;

body{ background-color: ivory; }
canvas{border:1px solid red; margin:0 auto; }

＆＃13;

<canvas id='myCanvas' width='979px' height='560px'></canvas>

＆＃13;

Answer 2

在使用图像源之后，您似乎正在设置图像源，在调用图像源时，它将使用默认的空白状态。

你似乎也在使用start.onload但是start不是元素，而是代表一个的varble，它不会被加载，因为它不是原始html元素的一部分。我会使用canvas.onload或使用body.onload

运行它

图片未在画布上加载？

2 个答案: