在HTML5画布中将图像剪切成不同的形状，例如三角形，五边形？

Question

I am developing a game in html 5 canvas where I have to clip images into many shapes. 我正在用html 5 canvas开发游戏，必须将图像剪切成多种形状。 I also want to join these clipped images using mouse events . 我也想使用mouse events来加入这些剪切的图像。 Can I only clip a square shape? 我只能剪一个正方形吗？ Also, is it necessary to save x and y co-ordinates of each clipped image to know its position or is there any alternate way? 另外，是否需要保存每个裁剪图像的x和y坐标以知道其位置，还是有其他替代方法？

Answer 1

Here is an example to illustrate how to: 这是说明如何的示例：

clip an image into 4 triangle pieces, 将图像剪成4个三角形，
hit-test the pieces, 击打测试，
move the pieces using your mouse 用鼠标移动碎片

在此处输入图片说明

Here's code and a Fiddle: http://jsfiddle.net/m1erickson/r59ch/ 这是代码和小提琴： http : //jsfiddle.net/m1erickson/r59ch/

<!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 $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    var isDown=false;
    var startX;
    var startY;

    var parts=[];
    var selectedPart=-1;

    var img=new Image();
    img.onload=function(){
        var cx=img.width/2;
        var cy=img.height/2;
        var w=img.width;
        var h=img.height;
        parts.push({x:25,y:25,points:[{x:0,y:0},{x:cx,y:cy},{x:0,y:h}]});
        parts.push({x:25,y:25,points:[{x:0,y:0},{x:cx,y:cy},{x:w,y:0}]});
        parts.push({x:125,y:25,points:[{x:w,y:0},{x:cx,y:cy},{x:w,y:h}]});
        parts.push({x:25,y:25,points:[{x:0,y:h},{x:cx,y:cy},{x:w,y:h}]});
        drawAll();
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house100x100.png";

    function drawAll(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<parts.length;i++){
            draw(parts[i]);
        }
    }

    function draw(part){
        ctx.save();
        define(part);
        ctx.clip();
        ctx.drawImage(img,part.x,part.y);
        ctx.stroke();
        ctx.restore();
    }

    function hit(part,x,y){
        define(part);
        return(ctx.isPointInPath(x,y))
    }

    function move(part,x,y){
        part.x+=x;
        part.y+=y;
        draw(part);
    }

    function define(part){
        ctx.save();
        ctx.translate(part.x,part.y);
        ctx.beginPath();
        var point=part.points[0];
        ctx.moveTo(point.x,point.y);
        for(var i=0;i<part.points.length;i++){
            var point=part.points[i];
            ctx.lineTo(point.x,point.y);
        }
        ctx.closePath();
        ctx.restore();
    }

    function handleMouseDown(e){
      e.preventDefault();
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      for(var i=0;i<parts.length;i++){
          if(hit(parts[i],startX,startY)){
              isDown=true;
              selectedPart=i;
              return;
          }
      }          
      selectedPart=-1;
    }

    function handleMouseUp(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseup stuff here
      isDown=false;
    }

    function handleMouseOut(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseOut stuff here
      isDown=false;
    }

    function handleMouseMove(e){
      if(!isDown){return;}
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      var dx=mouseX-startX;
      var dy=mouseY-startY;
      startX=mouseX;
      startY=mouseY;
      //
      var part=parts[selectedPart];
      move(part,dx,dy);
      drawAll();


    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});


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

</head>

<body>
    <h4>Drag the right triangle-image into place</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

You can define a path and use that for clipping: 您可以定义路径并将其用于剪切：

ctx.save();    /// store current state of canvas incl. default clip mask

ctx.beginPath();
ctx.moveTo(0, 10);
ctx.lineTo(200, 10);
ctx.lineTo(100, 110);
ctx.clip();    /// will close the path implicit

/// draw graphics here

ctx.restore(); /// restore default infinite clipping mask

This will create a triangle. 这将创建一个三角形。 If you now draw on top the graphics will be clipped to this shape. 如果现在在顶部绘制，图形将被裁剪为该形状。 Coordinates given here are of course just for example. 当然，此处给出的坐标仅是示例。

A small note: the different browsers may or may not anti-alias the clipping mask. 小提示：不同的浏览器可能会也可能不会对剪切蒙版进行反锯齿。 If not the result may turn out "hard-edged". 如果不是这样，结果可能会变成“硬边”。

(I recommend to use save() / restore() in connection with clip() . There is suppose to be a resetClip() method but this is rarely implemented in the browsers and is currently considered for removal from the specs.) （我建议将save() / restore()与clip() 。应该有一个resetClip()方法，但是该方法很少在浏览器中实现，并且目前考虑将其从规格中删除。）

An alternative to using clip() is to use image pattern. 使用clip()的替代方法是使用图像模式。 Define a pattern with the image you want to clip, then create the path as above and use fill() with the pattern set as fillStyle . 使用要裁剪的图像定义一个图案，然后如上所述创建路径，并使用将fill()设置为fillStyle的图案。 For this to work properly you need to translate() the canvas before filling to place the image pattern in the desired position. 为了使其正常工作，您需要在填充之前将canvas translate()以便将图像图案放置在所需位置。

在HTML5画布中将图像剪切成不同的形状，例如三角形，五边形？

问题描述

2 个解决方案

解决方案1
4 已采纳 2014-01-23 06:58:20

解决方案2
1

在HTML5画布中将图像剪切成不同的形状，例如三角形，五边形？

问题描述

2 个解决方案

解决方案1 4 已采纳 2014-01-23 06:58:20

解决方案2 1

解决方案1
4 已采纳 2014-01-23 06:58:20

解决方案2
1