キャンバスクリップイメージ内の円

Question

私はちょうど曲線でイメージをクリップしたいと思っていましたが、これは起こっていません。 イメージのみが表示されていますが、クリップでは表示されません。

HTML

<canvas id="leaf" width="500" height="500" style='left: 0; 
position: absolute; top: 0;'></canvas> 

はJavaScript

あなたは imgObjの onloadハンドラの関数オブジェクト内の行 context.save();から context.clip();にすべてを移動する必要が

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(); 

Answer 1

：

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/を参照してください。

Answer 2

スクリプトが起動してからイメージが読み込まれると、あとで復元してからキャンバスがなくなります。
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';