HTML5画布 - 填充图片的圆圈 [英] HTML5 Canvas - Fill circle with image

问题描述

如何在圈子内绘制图片？如果我这样做：

How can I draw an image inside a circle? If I do:

context.beginPath();
context.arc((e.pageX),(e.pageY),161,0,Math.PI*2,true);
context.closePath();

我如何使用fill（）填充我的绘制图像？

How can I then use fill() to fill it with my drawn image?

推荐答案

我做了这一天的一件大事我做;

I did this the other day for a big thing I'm making;

var thumbImg = document.createElement('img');

thumbImg.src = 'path_to_image';
thumbImg.onload = function() {
    tmpCtx.save();
    tmpCtx.beginPath();
    tmpCtx.arc(25, 25, 25, 0, Math.PI * 2, true);
    tmpCtx.closePath();
    tmpCtx.clip();

    tmpCtx.drawImage(thumbImg, 0, 0, 50, 50);

    tmpCtx.beginPath();
    tmpCtx.arc(0, 0, 25, 0, Math.PI * 2, true);
    tmpCtx.clip();
    tmpCtx.closePath();
    tmpCtx.restore();
};

适合我。

这是一个更复杂的版本，我做的是图片缓存， https://jsfiddle.net/jaredwilli/ex5n5/

Here's a more complex version of it that I made which does image caching too, https://jsfiddle.net/jaredwilli/ex5n5/

这篇关于HTML5画布 - 填充图片的圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！