javascript 画布在一个圆圈中剪辑图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15566253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
canvas clip image in a circle
提问by Puzzled Boy
I just wanted to clip image in a curve .. but not happening this.. Only image is showing and but not with clip.
我只是想在曲线中剪辑图像.. 但没有发生这种情况.. 只显示图像而不显示剪辑。
HTML
HTML
<canvas id="leaf" width="500" height="500" style='left: 0;
position: absolute; top: 0;'></canvas>
JavaScript
JavaScript
var canvas = document.getElementById('leaf');
var context = canvas.getContext('2d');
/*
* save() allows us to save the canvas context before
* defining the clipping region so that we can return
* to the default state later on
*/
context.save();
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
context.quadraticCurveTo(288, 288, 188, 150);
context.lineWidth = 10;
context.clip();
context.beginPath();
var imageObj = new Image();
imageObj.onload = function()
{
context.drawImage(imageObj, 10, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
/* context.beginPath();
context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'yello';
context.fill();
*/
/*
* restore() restores the canvas context to its original state
* before we defined the clipping region
*/
context.restore();
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
context.quadraticCurveTo(288, 288, 188, 150);
context.lineWidth = 10;
context.strokeStyle = 'blue';
context.stroke();
回答by halex
You have to move everything from the line context.save();to context.clip();inside the function object of your imgObj's onloadhandler:
您必须将所有内容从该行移动context.save();到context.clip();您imgObj的onload处理程序的函数对象内：
imageObj.onload = function()
{
context.save();
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
context.quadraticCurveTo(288, 288, 188, 150);
context.lineWidth = 10;
context.clip();
context.drawImage(imageObj, 10, 50);
};
See http://jsfiddle.net/CSkP6/1/for an example.
有关示例，请参见http://jsfiddle.net/CSkP6/1/。
回答by GameAlchemist
When, a few time after your script is launched, your image gets loaded, you have no more a clipped Canvas since you restore it afterwise.
You need to do a drawClipped function, and call it in your onload function for instance :
当您的脚本启动几次后，您的图像被加载时，您将不再有裁剪的 Canvas，因为您随后将其恢复。
你需要做一个 drawClipped 函数，并在你的 onload 函数中调用它，例如：
function drawClipped(context, myImage) = {
context.save();
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
context.quadraticCurveTo(288, 288, 188, 150);
context.lineWidth = 10;
context.clip();
context.drawImage(myImage, 10, 50);
context.restore();
};
var imageObj = new Image();
imageObj.onload = function() {
drawClipped(context, imageObj);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
