HTML5 Canvas - 用图像填充圆圈

本文介绍了HTML5 Canvas - 用图像填充圆圈的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在圆内绘制图像?如果我这样做:

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 Canvas - 用图像填充圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！