0

我需要在用户浏览器中将图像划分为水平 2 行和垂直 2 行。因此，图像由 9 个部分组成。

通过画线或将 9 个部分分开一点来做到这一点。

我知道 Raphael 和 paper.js，但也许它可以在没有额外框架的情况下完成（canvas html5 和 html4 JS）。

如果你有办法，使用它是否也能够像分割蛋糕一样将一个圆圈分成 4 分？

4

1 回答 1

2

drawImage您可以使用画布功能对图像进行切片和分隔

在此处输入图像描述

所有的工作都是由context.drawImage函数使用一些额外的参数完成的

drawImage能够剪辑源图像的一部分并将其绘制在画布上

顺便说一句，drawImage也能够同时缩放该剪辑部分。

以下是允许drawImage对源图像进行切片的参数：

  1. 源图像
  2. 开始剪辑的源图像上的 X 位置
  3. 源图像上将开始剪辑的 Y 位置
  4. 要剪辑的源图像的宽度
  5. 要剪辑的源图像的高度
  6. 画布上的 X 位置以放置剪切的子图像
  7. 画布上的 Y 位置以放置剪切的子图像
  8. 要在画布上绘制的剪切图像的缩放宽度
  9. 要在画布上绘制的裁剪图像的缩放高度

以下是如何使用 drawImage 将源图像切成 3x3 单元格，间距为 10px

context.drawImage(

  img,               // the source image
  0,0,               // get the image starting at it's 0,0 position
  img.width,         // grab the entire width of the image
  img.height         // grab the entire height of the image
  x*img.width/3+10,  // make 3 image "columns" with 10px spacing
  x*img.height/3+10, // make 3 image "rows" with 10px spacing
  img.width/3,       // each image column is 1/3 of the original image
  img.height/3       // each image row is 1/3 of the original image

);

这是代码和小提琴：http: //jsfiddle.net/m1erickson/m89Gg/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var image=new Image();
    image.onload=function(){
        slice(image);
    }
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg";

    function slice(img){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var w=img.width;  // original image width
        var h=img.height; // original image height
        var rows=3;       // # of rows 
        var cols=3;       // # of columns
        var cw=w/rows;    // cell width
        var ch=h/cols;    // cell height
        var scale=3;      // also, scale the image down
        var spacing=5;    // spacing between cells

        // set the canvas width to accommodate 
        // sliced/space/scaled image
        canvas.width=w/scale+spacing*2;
        canvas.height=h/scale+spacing*2;

        ctx.clearRect(0,0,canvas.width,canvas.height);

        for(var y=0;y<3;y++){
            for (var x=0;x<3;x++){
                ctx.drawImage(img,x*cw,y*ch,cw,ch,
                    x*(cw/scale+spacing),y*(ch/scale+spacing),cw/scale,ch/scale)
            }
        }
        ctx.stroke()
    }

}); // end $(function(){});
</script>

</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-06-24T18:47:56.313 回答