where-clause - 我想使用 HTML Canvas 显示多个带圆角的图像。我想结合下面的两个程序

Question

函数加载许多问题函数 loadImages(sources, call) {

var images = {};
var loadedImages = 0;
var numImages = 0;
    
    for(var src in sources) {
      numImages++;
    }
    
    for(var src in sources) {
        images[src] = new Image();
        
        images[src].onload = function()
        {
        if(++loadedImages >= numImages)
        {
        
        call(images);
        }
      };
      images[src].src = sources[src];
    }

}

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

var sources = { img1: '1.jpeg', img2: '2.jpeg', img3: '1.jpeg', img4: '2.jpeg', img5: '1.jpeg', img6: '2.jpeg ', img7: '1.jpeg' };

    loadImages(sources, function(images) {
    context.drawImage(images.img1, 0,   0,  140,    120);
    context.drawImage(images.img2, 150, 0,  140,    120);
    context.drawImage(images.img3, 300, 0,  140,    120);
    context.drawImage(images.img4, 450, 0,  140,    120);
    context.drawImage(images.img5, 600, 0,  140,    120);
    context.drawImage(images.img6, 750, 0,  140,    120);
    context.drawImage(images.img7, 900, 0,  140,    120);
  });

此功能添加圆角。

$(函数(){

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var img1=new Image();

img1.onload=function()
{
    ctx.save();
    roundedImages ( 10,10,140,120,10);
    ctx.clip();
    ctx.drawImage ( img1,10,10,140,120);
    ctx.restore();
}

function roundedImages(x,y,width,height,radius)
{
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
}

img1.src="1.jpeg";

});

标签： where-clause