如何在一个圆圈内绘制图像?如果我做:
@H_301_2@context.beginPath();
context.arc((e.pageX),(e.pageY),161,Math.PI*2,true);
context.closePath();
那么我怎么可以用fill()来填充我绘制的图像呢?
解决方法
有一天我做了这件事,我做了一件大事
@H_301_2@var thumbImg = document.createElement('img');
thumbImg.src = 'path_to_image';
thumbImg.onload = function() {
tmpCtx.save();
tmpCtx.beginPath();
tmpCtx.arc(25,25,Math.PI * 2,true);
tmpCtx.closePath();
tmpCtx.clip();
tmpCtx.drawImage(thumbImg,50,50);
tmpCtx.beginPath();
tmpCtx.arc(0,true);
tmpCtx.clip();
tmpCtx.closePath();
tmpCtx.restore();
};
为我工作完美。
这是一个更复杂的版本,我做了图像缓存,https://jsfiddle.net/jaredwilli/ex5n5/