10

Web サイトでこの coverflowスクリプトを使用していますが、角の丸いキャンバスを出力する方法がわかりません。

これは画像を描画するコードです

ctx.drawImage(image, cropLeft, cropTop, wid-2*cropLeft, hei-2*cropTop, 0, 0, newWidth, newHeight);

arc() または arcTo() 関数を使用していくつかのチュートリアルを読みましたが、画像をオブジェクトとして使用しているチュートリアルはありません。

更新 1: drawimage() には、描画用に次のパラメーターしかないことがわかりました。

だから、キャンバスを通して角の丸い画像を描くことはできないと思います..

4

2 に答える 2

3

clip() ソリューションの問題は、この質問で示されているように、Chrome がアンチエイリアス処理されていない境界線でそれをレンダリングすることです。

ダニエルが彼の答えで言っているように、1つの解決策はglobalCompositeOperationでそれを行うことです：

//set-up - probably only needs to be done once
var scratchCanvas = document.createElement('canvas');
scratchCanvas.width = 100;
scratchCanvas.height = 100;
var scratchCtx = scratchCanvas.getContext('2d');


//drawing code
scratchCtx.clearRect(0, 0, scratchCanvas.width, scratchCanvas.height);

scratchCtx.globalCompositeOperation = 'source-over'; //default

//Do whatever drawing you want. In your case, draw your image.
scratchCtx.drawImage(imageToCrop, ...);


//As long as we can represent our clipping region as a single path, 
//we can perform our clipping by using a non-default composite operation.
//You can think of destination-in as "write alpha". It will not touch
//the color channel of the canvas, but will replace the alpha channel.
//(Actually, it will multiply the already drawn alpha with the alpha
//currently being drawn - meaning that things look good where two anti-
//aliased pixels overlap.)
//
//If you can't represent the clipping region as a single path, you can
//always draw your clip shape into yet another scratch canvas.

scratchCtx.fillStyle = '#fff'; //color doesn't matter, but we want full opacity
scratchCtx.globalCompositeOperation = 'destination-in';
scratchCtx.beginPath();
scratchCtx.arc(50, 50, 50, 0, 2 * Math.PI, true);
scratchCtx.closePath();
scratchCtx.fill();


//Now that we have a nice, cropped image, we can draw it in our
//actual canvas. We can even draw it over top existing pixels, and
//everything will look great!

ctx.drawImage(scratchCanves, ...);
于 2014-08-27T15:56:16.540 に答える