画布绘制按分区背景精灵绘制的图像

Canvas drawImage by division background sprites

本文关键字：绘制 背景 精灵 图像 分区 布绘制      更新时间：2023-09-26

我正在尝试使用精灵（停止工作良好）在画布元素（运行良好）中设置一些图像对象：

注意：代码已简化！

.HTML 

<canvas id="canvasMap" width="600" height="600"></canvas> 
<div id="playerLeft"></div>

.JS

var canvas = document.getElementById('canvasMap');
var context = canvas.getContext('2d');
var img = new Image();
img.src = $($(document).find('#playerLeft').get(0)).css('background').replace(/^url'(["']?/, '').replace(/["']?')$/, '');
img.onload = function () {
        context.drawImage(img, 0, 0);
};

.CSS

#playerLeft {
    left: 0px;
    height:58px;
    display:block;
    width: 80px;
    background: url('/assets/sprites/angle.png') -0px -70px;
}

结果（开发者控制台）

Resource interpreted as Image but transferred with MIME type text/html: "http://example.com/rgba(0,%200,%200,%200)%20url(http://example.com/assets/spr…png)%20repeat%20scroll%200px%20-70px%20/%20auto%20padding-box%20border-box"

问题

如何使声明的图像对象通过 css 定义的 id 接收背景精灵？我想在没有第三方库的情况下解决它。

以下是获取div 背景图像的 dataURL 的一种方法： 

// get the dataURL of your div's background
var bg = $('#sprite1').css('background-image');
bg = bg.replace('url(','').replace(')','').replace('"','').replace('"','');

示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// get the dataURL of your div's background
var bg = $('#sprite1').css('background-image');
bg = bg.replace('url(','').replace(')','').replace('"','').replace('"','');
// build an image from the dataURL
var img=new Image();
//img.crossOrigin='anonymous';
img.onload=function(){
  // draw the image onto the canvas
  ctx.drawImage(img,20,20);
}
img.src=bg;
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
#sprite1{
  border:1px solid blue;
  width:75px;
  height:75px;
  background-image:url('https://dl.dropboxusercontent.com/u/139992952/multple/sun.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=sprite1>Sprite1</div>
<canvas id="canvas" width=100 height=100></canvas>

相关文章：