Question

这是我的html文档：

<html>
<head>

<meta charset="utf-8">
<title>Automapper Editor</title>

</head>
<body>

<nobr>

<script>
var img = new Image()
img.src = "grass_main_0.7.png"

for(var y=0; y < 16; y++) {
    for(var x=0; x < 16; x++) {
            var tilecanvas = document.createElement("canvas")
            var tilectx = tilecanvas.getContext("2d")
            tilecanvas.width = 64
            tilecanvas.height = 64
            tilecanvas.draggable = true
            tilectx.drawImage(img, x*64, y*64, 64, 64, 0, 0, 64, 64)
            document.body.appendChild(tilecanvas)
    }
    document.body.appendChild(document.createElement("br"))
}
</script>

</nobr>

</body>
</html>

我想在尺寸为64像素的16幅图像中分割大小为1024像素的图像。然后我想在画布上绘制它们并将它们写入文档。这是我的问题：

行tilecanvas.draggable = true不起作用，这应该与<canvas draggable="true">相同。
<nobr>标记不会阻止画布换行，但我希望它们在屏幕上保持16x16。
第一次加载页面时无法看到图像，可以在firefox中按 STRG + F5 （又名 Ctrl-F5 ）来模拟。

Answer 1

您可以通过以下方式解决：

使用容器div作为图块
设置容器元素的固定宽度
将canvas元素的CSS调整为float

实例

（注意：为tiles / demo添加随机alpha以提高可见性）

var img = new Image();
img.onload = render;
img.src = "http://www.psdgraphics.com/file/colorful-triangles-background.jpg";

function render() {

  var cont = document.getElementById("cont");

  for (var y = 0; y < 16; y++) {
    for (var x = 0; x < 16; x++) {
      var tilecanvas = document.createElement("canvas");
      var tilectx = tilecanvas.getContext("2d");
      tilecanvas.width = 64;
      tilecanvas.height = 64;
      tilecanvas.draggable = true;

      tilectx.globalAlpha = Math.random() + 0.5; // just to increase visuals
      
      tilectx.drawImage(img, x * 64, y * 64, 64, 64, 0, 0, 64, 64);
      cont.appendChild(tilecanvas);
    }
  }
}

#cont {width: 1024px;border: 1px solid #000}
canvas {float:left}

<div id="cont"></div>

Answer 2

正如RienNeVaPlu͢s＆amp; Ken Fyrstenberg，请确保您使用onload加载图像时间。

这是一个概念验证，允许拼接图像画布的html拖放：

https://jsfiddle.net/m1erickson/g9nfuved/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
    body{ background-color: ivory; padding:10px; }
    canvas{border:1px solid red; margin-left:0px;}
    #dropzone{width:250px;height:50px;border:1px solid blue;}
</style>
<script>
$(function(){

    var $results=$('#results');

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
    function start(){

        var w=img.width/4;
        var h=img.height;

        for(var x=0; x < 4; x++) {
                var tilecanvas = document.createElement("canvas");
                var tilectx = tilecanvas.getContext("2d");
                tilecanvas.width = w;
                tilecanvas.height = h;
                tilecanvas.draggable = true
                tilecanvas.id='canvas'+x;
                tilectx.drawImage(img, x*w,0,w,h, 0, 0, w, h)
                document.body.appendChild(tilecanvas)
                tilecanvas.addEventListener('dragstart', function(e){
                    e.dataTransfer.setData('text',e.target.id);
                }, false);
                tilecanvas.addEventListener('dragenter', handleEvents, false);
                tilecanvas.addEventListener('dragover', handleEvents, false);
                tilecanvas.addEventListener('dragleave', handleEvents, false);
                tilecanvas.addEventListener('dragend', handleEvents, false);
        }
        document.body.appendChild(document.createElement("br"))
        var dropzone=document.getElementById('dropzone');
        dropzone.addEventListener('dragover',function(e){e.preventDefault(); return(false);});
        dropzone.addEventListener('dragenter',function(e){return(false);});
        dropzone.addEventListener('drop',function(e){
            $results.text('You dropped: '+e.dataTransfer.getData('text'));
            return(false);
        });
    }

    function handleEvents(e){ return(false); }

}); // end $(function(){});
</script>
</head>
<body>
    <h4 id='results'>Drag 1+ of the image strips</h4>
    <div id='dropzone' droppable='true'>Drop Here.</div>
</body>
</html>

画布的问题

2 个答案: