画布剪辑图像在一个圆圈 [英] canvas clip image in a circle
本文介绍了画布剪辑图像在一个圆圈的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我只是想在曲线中剪辑图片..但是没有发生这种情况..
只有图片显示但没有剪辑。
I just wanted to clip image in a curve .. but not happening this.. Only image is showing and but not with clip.
HTML
<canvas id="leaf" width="500" height="500" style='left: 0;
position: absolute; top: 0;'></canvas>
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();
推荐答案
你必须从<$ c行移动一切$ c> context.save(); 到 context.clip();
在 imgObj <的函数对象内/ code>的
onload
处理程序:
You have to move everything from the line context.save();
to context.clip();
inside the function object of your imgObj
's onload
handler:
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);
};
参见 http://jsfiddle.net/CSkP6/1/ 的例子。
这篇关于画布剪辑图像在一个圆圈的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文