html5精灵添加到画布答案

【问题标题】：html5 sprite added to canvashtml5精灵添加到画布
【发布时间】：2014-04-28 08:16:28
【问题描述】：

在网上（也在这里）进行了全面的搜索之后，到目前为止没有任何帮助。我想将我拥有的图像精灵插入到画布上，但图像必须位于画布的底部，当然在边框之上。 http://jsfiddle.net/LcKZX/1/我的问题是：如何在平台之上创建一个精灵（我在下面的imgur图像：“imageObject.src”）？

HTML 代码：

<!DOCTYPE HTML>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="matrixStyle.css"/>
</head>

<title>Lil Teemo</title>

<body onload="draw();">
    <canvas id="tutorial" width="600" height="400"></canvas>
    <script type="text/javascript" src="matrixB.js"></script> 
</body>
</html>

JS代码（此为正常运行的平台，忽略代码）：

var canvas = document.getElementById('tutorial');
        var context = canvas.getContext('2d');
        var x = 0;
        var y = 350;
        var width = 650;
        var height = 50;
        var imageObj = new Image();

          imageObj.onload = function() {
             context.drawImage(imageObj, x, y, width, height);
      };
      imageObj.src = 'http://i.imgur.com/dAwfqnv.png?1?3495';

CSS 代码：

canvas {
    border: 5px solid black;
    background: #87CEFA;

}

body {
    margin: 5;
    padding: 0;
}

如何在画布上插入精灵？弄清楚这一点后，我将向精灵添加动作。感谢您的帮助！

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

我已在 jsfiddle 上检查您的代码并更正它 here。

draw() 是undefined 存在问题，由于路径不正确，因此找不到图像。

【讨论】：

路径不正确的原因是我的电脑上有platform.png。我不能把它放在jsfiddle上。除了将精灵定位在画布上之外，一切正常。
@user3223207 只需将图片上传到 imgur.com 并使用那里的链接
我刚刚陈述了您在 jsfiddle 示例中所犯的错误。现在您可以在本地服务器上尝试相同的代码，您可以轻松访问所有资产。

【解决方案2】：

您可以使用 img 标记来执行此操作。。（我认为你不想要）链接：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage
对于图像对象：要获取画布上矩形区域每个像素的图像数据，我们可以通过画布上下文的getImageData()方法获取图像数据对象，然后访问来自 data 属性的像素数据。图像数据中的每个像素都包含四个分量，一个红色、绿色、蓝色和 alpha 分量。使用图像数据对象访问像素数据有三种常用技术。从区域的左上角到右下角遍历所有像素根据 x, y 坐标提取像素数据遍历所有像素，同时跟踪每个像素的 x、y 坐标。这应该可以帮助你：

http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

【讨论】：

我正在使用您引导我访问的网站。问题是我似乎无法让精灵角色出现在画布上。我有2个精灵。其中一个出现，第二个没有出现。我无法将 .png 文件路径到 jsfiddle 以向您展示我的意思。
在此处上传您的 platform.png：imgur.com 然后在此链接中将图像的链接提供给 imageObj.src：html5canvastutorials.com/advanced/… 并回复我
我在 imgur.com 上上传了平台，但由于某些奇怪的原因，它没有显示在 jsfiddle 上。
把你上传到 imgur.com 的图片的链接给我