Question

如何使用javascript获取单个图像的部分并将其存储在数组中，然后在html5画布上随机显示。

Answer 1

您可以使用drawImage（）方法的剪切参数，并将剪切的图像绘制到动态创建的画布上。

一个例子可能是：

function getClippedRegion(image, x, y, width, height) {

    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    canvas.width = width;
    canvas.height = height;

    //                   source region         dest. region
    ctx.drawImage(image, x, y, width, height,  0, 0, width, height);

    return canvas;
}

这将返回一个canvas元素，其中已经绘制了剪切图像。您现在可以直接使用画布将其绘制到另一个画布上。

使用示例;在您的主要代码中，您可以：

var canvas = document.getElementById('myScreenCanvas'),
    ctx    = canvas.getContext('2d'),
    image  = document.getElementById('myImageId'),
    clip   = getClippedRegion(image, 50, 20, 100, 100);

// draw the clipped image onto the on-screen canvas
ctx.drawImage(clip, canvas.width * Math.random(), canvas.height * Math.random());

Answer 2

....或者你可以使用更快更容易的CSS精灵技术。

如果您有图像（例如my_Image.gif）并且您打算使用此方法仅提取一部分，则可以将提取模拟为DIV元素的背景。请参阅下面的代码。

下面的

part1 id参数简单地说＆＃34;从我的图像中，从位置0px到左边（边距左边）切片100px高和100px宽，从0px切到顶部（边缘顶部））＆＃34;

下面的

part2 id参数简单地说＆＃34;从我的图像中，切片100px高和100px宽从位置-91px到左边（边距左边）和0px到顶边（边距 - 顶部）＆＃34;

使用此功能，您只需操作像素即可从任何位置切割任意大小。您也可以使用％。

注意：在这种情况下，您的图片必须是gif格式，并且必须位于服务器的根目录中...

您可以使用其他图片扩展程序... jpeg，png等。

 <!DOCTYPE html>
      <html>
        <head>
          <style>

            #portion1 {
                width: 100px;
                height: 100px;
                background: url(my_Image.gif) 0 0;
            }

            #portion2 {
                width: 100px;
                height: 100px;
                background: url(my_Image.gif) -91px 0;
            }
            </style>
            </head>
            <body>


             <div id="portion1"></div><br>
             <div id="portion2"></div>


              <script>
               //creating the array to hold the portions
               var ImagePortions = [
               "url('my_Image.gif') 0 0 ",
               "url('my_Image.gif') -91px 0"];

/*You can now create your canvas container that will act as the parent  of these array elements and use Math.random() to display the portions*/


       </script>


        </body>
        </html>

使用javascript拆分图像

2 个答案: