如何使用Javascript HTML5裁剪自定义形状_Javascript

如何使用Javascript HTML5裁剪自定义形状

javascript

如何使用Javascript HTML5裁剪自定义形状,javascript,Javascript,如何使用javascript从图像裁剪自定义形状本质上，我希望用户能够从照片中裁剪出一张脸比如，他们用Flash来做，我们需要用JS在HTML5画布上做有什么想法吗？试试这样：身体{ 边际：0px；填充：0px； } #我的画布{ 边框：1px实心#9C9898； } var canvas=document.getElementById（'myCanvas'）； var context=canvas.getContext（'2d'）； //开始自定义形状 context.beginP

如何使用javascript从图像裁剪自定义形状

本质上，我希望用户能够从照片中裁剪出一张脸

比如，他们用Flash来做，我们需要用JS在HTML5画布上做

有什么想法吗？

试试这样：


身体{
边际：0px；
填充：0px；
}
#我的画布{
边框：1px实心#9C9898；
}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
//开始自定义形状
context.beginPath（）；
上下文。moveTo（170,80）；
贝塞尔曲线图（130100130150230150）；
贝塞尔曲线图（250180320180340150）；
贝塞尔曲线图（420150420120390100）；
贝塞尔曲线图（430、40370、30340、50）；
贝塞尔曲线图（320,5250,20250,50）；
贝塞尔曲线图（200,5150,20170,80）；
//完全自定义形状
closePath（）；
context.lineWidth=5；
context.strokeStyle='blue'；
stroke（）；

谢谢Rahul。这部分我知道。知道如何从画布中裁剪图像吗？请检查：-您可以使用类似img.src=canvas.toDataURL（）的内容；另请参见此示例：-可能对您有帮助！！：）快乐编码

<!doctype html>
 <html>
  <head>
<style>
  body {
    margin: 0px;
    padding: 0px;
  }
  #myCanvas {
    border: 1px solid #9C9898;
  }
</style>
</head>
 <body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  // begin custom shape
  context.beginPath();
  context.moveTo(170, 80);
  context.bezierCurveTo(130, 100, 130, 150, 230, 150);
  context.bezierCurveTo(250, 180, 320, 180, 340, 150);
  context.bezierCurveTo(420, 150, 420, 120, 390, 100);
  context.bezierCurveTo(430, 40, 370, 30, 340, 50);
  context.bezierCurveTo(320, 5, 250, 20, 250, 50);
  context.bezierCurveTo(200, 5, 150, 20, 170, 80);

  // complete custom shape
  context.closePath();
  context.lineWidth = 5;
  context.strokeStyle = 'blue';
  context.stroke();
</script>
 </body>
</html>