Question

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

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

我该怎么办？

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);
  }
}

如何将图像放入圆形画布？

1 个答案: