Question

这是我的代码：

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55, 95, 30, 0, 2 * Math.PI);

var ctx1 = c.getContext("2d");
ctx1.rect(0, 0, 200, 300);
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, 15, 55);
  }
}

canvas {
  border: 1px solid #000000;
  position: absolute;
  top: 66px;
  left: 22px;
}

<canvas id="myCanvas" width="236" height="413"></canvas>

从上面的代码中我尝试将图像添加到圆形和矩形中我已经完成了在圆圈中添加图像我尝试将另外一个图像添加到背景的矩形中，但它似乎不起作用。

Answer 1

您只需创建第二张图片并相应地进行定位即可。也只使用一个CachingConnectionFactory，不需要多次声明它。修改了你的代码。我希望这会对你有所帮助：

＆＃13;

context

＆＃13;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55, 95, 30, 0, 2 * Math.PI);
ctx.rect(18, 150, 200, 250);
ctx.clip();
ctx.stroke();

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() {
    ctx.drawImage(base_image, 15, 55);
  }
  second_image = new Image();
  second_image.src = 'https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
  second_image.onload = function() {
    ctx.drawImage(second_image, 19, 151);
  }
}

＆＃13;

如何通过图层将图像添加到画布？

1 个答案: