javascript - 如何将图像放入圆形 Canvas ？

Question

>>> Jsfiddle

var c = document.getElementById("myCanvas");
                            var ctx = c.getContext("2d");
                            ctx.beginPath();
                            ctx.arc(55,95,30,0,2*Math.PI);
                            ctx.stroke();

var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src='https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
  base_image.onload = function(){
    context.drawImage(base_image, 20, 20);
  }
}

<canvas id="myCanvas"  
        width="236" 
        height="413" 
        style="border:1px solid #000000; 
               position:absolute; 
               top:66px; 
               left:22px;"></canvas>

我已经尝试将图像放入 Canvas 而不是我的圆圈位置。 但我不知道如何将正方形图像调整为与我的绘制圆相同大小的圆并放在相同位置。

我该怎么办？

Answer 1

你必须为此使用clip。 这是 http://codepen.io/sam83045/pen/eBKRPr?editors=0010 的 Codepen

您编辑的 javascript 代码如下:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55, 95, 30, 0, 2 * Math.PI);
ctx.clip();
ctx.stroke();

var canvas = document.getElementById('myCanvas'),
  context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
  base_image.onload = function() {
    context.drawImage(base_image, 16, 55);
  }
}