问如何将图像插入到画布弧中？
EN

Stack Overflow用户

提问于 2014-08-20 23:27:41

回答 1查看 1.4K关注 0票数 2

这是我的脚本，我试图在弧形画布中插入一个图像，以代替黑色部分，但没有解决方案:/这是我第一次在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>

javascript

jquery

canvas

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-20 23:42:43

您可以使用合成

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

示例

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25416080

复制

相似问题

问如何将图像插入到画布弧中？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将图像插入到画布弧中？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将图像插入到画布弧中？
EN