html5图片重叠,HTML 5 Canvas图像叠加可重复

别介意我搞清楚了。

var canvas = document.createElement('canvas');

canvas.width = 250;

canvas.height = 250;

var canvas_context = canvas.getContext("2d");

var img = new Image();

img.onload = function(){

var msk = new Image();

msk.onload = function(){

var ptrn = canvas_context.createPattern(img, 'repeat');

canvas_context.fillStyle = ptrn;

canvas_context.fillRect(0, 0, canvas.width, canvas.height);

canvas_context.drawImage(img, 0, 0);

canvas_context.globalCompositeOperation = "destination-in";

canvas_context.drawImage(msk, 0, 0);

canvas_context.globalCompositeOperation = "source-over";

};

msk.src = $('#base_url').data('base')+'assets/themes/img/download.png';

}

img.src = $('#base_url').data('base')+'assets/uploads/thumbs/1381413411Purple-Night-Owls-thumb.jpg';

$('#itemPreview').html(canvas);