这是我的脚本,我试图将图像插入弧形画布以仅替换黑色部分,但没有解决方法:/这是我第一次在Stack上发布文章,希望能对我有所帮助。
还要看脚本的小提琴:http://jsfiddle.net/a1u6jmfj/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="250"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 50;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 100;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

最佳答案

您可以使用Compositing

var image = new Image();
image.src = /*image url*/;
image.onload = function() {
    context.save();
    context.globalCompositeOperation = 'source-in';
    context.drawImage(image, 0, 0);
    context.restore();
};


Example

关于javascript - 如何将图像插入 Canvas 弧?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25416080/

10-09 14:22