使用 drawImage() canvas 多次裁剪图像？

Question

我有这段代码并成功裁剪了左角，但我需要裁剪这张图片的所有 4 个角，可以用同一个对象完成吗？

//Global variables
  var myImage = new Image(); // Create a new blank image.

  // Load the image and display it.
  function displayImage() {

    // Get the canvas element.
    canvas = document.getElementById("myCanvas");

    // Make sure you got it.
    if (canvas.getContext) {

      // Specify 2d canvas type.
      ctx = canvas.getContext("2d");

      // When the image is loaded, draw it.
      myImage.onload = function() {

        // Load the image into the context.
        ctx.drawImage(myImage, 0, 0);

        // Get and modify the image data.
        changeImage();
      }

      // Define the source of the image.
      myImage.src = "ice.jpg";
    }
  }

  function changeImage() {

    ctx.strokeStyle = "white";
    ctx.lineWidth = "70";
    ctx.beginPath();
    ctx.arc(0,0,10,0*Math.PI,0.5*Math.PI);
    ctx.closePath();
    ctx.stroke();
  }
   </script>
    </head>

    <body onload="displayImage()">

  <canvas id="myCanvas" width="200" height="200">
    </canvas>

    </body>

   </html>

Answer 1

您必须手动绘制四个四分之一圆：

//Global variables
  var myImage = new Image(); // Create a new blank image.
 
  // Load the image and display it.
  function displayImage() {

    // Get the canvas element.
    canvas = document.getElementById("myCanvas");

    // Make sure you got it.
    if (canvas.getContext) {

      // Specify 2d canvas type.
      ctx = canvas.getContext("2d");

      // When the image is loaded, draw it.
      myImage.onload = function() {
        canvas.width = myImage.width;
        canvas.height = myImage.height;
        // Load the image into the context.
        ctx.drawImage(myImage, 0, 0);

        // Get and modify the image data.
        changeImage(myImage.width, myImage.height);
      }

      // Define the source of the image.
      myImage.src = "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg";
    }
  }

  function changeImage(w,h) {
    var r = 70;
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.arc(0,0,r,0*Math.PI,0.5*Math.PI);
    ctx.moveTo(0,r);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.arc(w,0,r, -0.5*Math.PI,-1*Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(0,h);
    ctx.arc(0,h,r, -0.5*Math.PI,0*Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(w,h);
    ctx.arc(w,h,r, -1*Math.PI,-0.5*Math.PI);
    ctx.closePath();
    ctx.fill();
  }

displayImage();

  <canvas id="myCanvas" width="200" height="200">
    </canvas>

Answer 2

有点像@AndreaBogazzi 说的，但有点不...

是的，您可以使用一条路径绘制所有 4 个角切口。

这是通过绘制一个切口圆然后拿起 "brush" 并将其移动到下一个切口的中心来完成的。

您必须拿起画笔，否则您会画出一条连接每个切口圆的中心点的线。

开始单条路径：ctx.beginPath()
画弧线：ctx.arc(0,0,cutRadius,0,Math.PI*2)
拿起"brush"并将其移动到下一个圆弧的中心：ctx.moveTo(w,0)
画弧线：ctx.arc(w,0,cutRadius,0,Math.PI*2)
拿起"brush"并将其移动到下一个圆弧的中心：ctx.moveTo(w,h)
画弧线：ctx.arc(w,h,cutRadius,0,Math.PI*2)
拿起"brush"并将其移动到下一个圆弧的中心：ctx.moveTo(0,h)
画弧线：ctx.arc(0,h,cutRadius,0,Math.PI*2)
填满所有 4 个镂空圆圈：ctx.fill()

注意：由于 "brush" 从 [0,0] 开始，您不必在第 1 步后 moveTo(0,0)。

示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var cutRadius=10;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/reef.jpg";
function start(){
  cw=canvas.width=img.width;
  ch=canvas.height=img.height
  ctx.drawImage(img,0,0);
  changeImage();
}

function changeImage() {
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.arc(0,0,cutRadius,0,Math.PI*2);
  ctx.moveTo(cw,0);
  ctx.arc(cw,0,cutRadius,0,Math.PI*2);
  ctx.moveTo(cw,ch);
  ctx.arc(cw,ch,cutRadius,0,Math.PI*2);
  ctx.moveTo(0,ch);
  ctx.arc(0,ch,cutRadius,0,Math.PI*2);
  ctx.fill();
}

<canvas id="canvas" width=300 height=300></canvas>

使用 drawImage() canvas 多次裁剪图像？

crop an image multipile times using drawImage() canvas?

drawimage

html5-canvas