如何使用HTML 5画布仅绘制图像的圆形部分？

Question

How can I draw only a circular part of an image using HTML 5 canvas?

For instance, to take a photo and only draw the face inside the canvas.

Answer 1

The way to achieve this is to use clip to define a clipping region:

var ctx;
var canvas;

var img = new Image();

img.onload = function() {

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


    ctx.beginPath();
    ctx.arc(100, 100, 60, 0, 6.28, false); //draw the circle
    ctx.clip(); //call the clip method so the next render is clipped in last path
    ctx.stroke();
    ctx.closePath();
    ctx.drawImage(img, -190, 0);
};

img.src = "http://www.antiquiet.com/wp-content/uploads/2011/03/Free-Trapper_Remasters_The-Kills-467x311.jpg";

You can see a working fiddle here: http://jsfiddle.net/hJS5B/47/

Code reused from my answer to this question: Draw multiple circles filled with image content

Answer 2

As I found this thread long before I found the solution for what I was searching for: the code above works great. But if you want to draw circular areas of an image again and again, eg in an onmouseup event, then you have to save and restore the state of the context. More is explained here: Can you have multiple clipping regions in an HTML Canvas?