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

@AndreaBogazzi所说的那种，但有点不......

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

这是通过绘制一个剪切圆然后拿起＆＃34;画笔＆＃34;来完成的。并将其移动到下一个切口的中心。

您必须拿起画笔，否则您将获得一条连接每个剪切圆的中心点的线条。

开始单一路径：ctx.beginPath()
画一条弧：ctx.arc(0,0,cutRadius,0,Math.PI*2)
拿起＆＃34;画笔＆＃34;并将其移动到下一个弧的中心：ctx.moveTo(w,0)
画一条弧：ctx.arc(w,0,cutRadius,0,Math.PI*2)
拿起＆＃34;画笔＆＃34;并将其移动到下一个弧的中心：ctx.moveTo(w,h)
画一条弧：ctx.arc(w,h,cutRadius,0,Math.PI*2)
拿起＆＃34;画笔＆＃34;并将其移动到下一个弧的中心：ctx.moveTo(0,h)
画一条弧：ctx.arc(0,h,cutRadius,0,Math.PI*2)
填写所有4个剪切圈：ctx.fill()

注意：因为＆＃34;刷＆＃34;从[0,0]开始，您不必在步骤＃1之后moveTo(0,0)。

示例代码和演示：

＆＃13;

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();
}

＆＃13;

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

＆＃13;

Answer 2

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

//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>

使用drawImage（）画布裁剪图像多次？

2 个答案: