Question

在我的情况下，我执行了路径剪辑，然后在剪裁区域中绘制图像。但它不起作用。

这里是我的代码。

  <!DOCTYPE HTML>
  <html>
  <head>
  <style>
  body {
    margin: 0px;
    padding: 0px;
  }
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = 75;
  var offset = 50;
  /*
   * save() allows us to save the canvas context before
   * defining the clipping region so that we can return
   * to the default state later on
   */
  context.save();
  context.beginPath();
  context.arc(x, y, radius, 0, 2 * Math.PI, false);
  context.clip();
  var imageObj = new Image();

  imageObj.onload = function() {
    context.drawImage(imageObj, 69, 50);
  };
  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-  vader.jpg';
 </script>
 </body>
 </html>

现在图像渲染没有剪裁。

请分享您宝贵的钥匙。

HTML5画布渲染 - 路径剪辑

0 个答案: