canvas 的问题

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>

我想将一张1024像素的图片分割成16张64像素的图片。然后我想在 canvas 上绘制它们并将它们写入文档。这是我的问题：

行 tilecanvas.draggable = true 不起作用，这应该与 <canvas draggable="true"> 相同。
<nobr> 标签不会阻止 canvas 换行，但我希望它们在屏幕上保持 16x16。
第一次加载页面时看不到图像，您可以通过按 STRG+F5 来模拟这种情况（a.k.a。Ctrl-F5) 在 Firefox 中。

Answer 1

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

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

实例

（注意：为 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 和 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/Whosebug/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>

canvas 的问题

problems with canvas

html

javascript

canvas