キャンバスに画像の角が丸くなった

Question

キャンバスに画像が入っています。私は丸い角を画像の2隅に置くことを考えています。私はそれをする方法はグローバルオペレーターの1つになると思っていますが、私はそれをどうやってやるのか分からないようです。

ご協力いただければ幸いです。

Answer 1

代わりにグローバルな演算子を使用しての、あなたは画像が占有したいスペースを把握

が続い前に、コンテキストにこのパスを入れて（角丸長方形を除いては、あるパスである必要があります）画像を描画し、.clip（）を呼び出して画像を描画します。

イメージは、イメージの2つの角に丸い角で描画されます。

あなたの唯一の本当のタスクは、今あなたがそれを行う必要があるパスを思い付いています。要するに

：

ctx.save(); 
ctx.beginPath(); 
// use lineTo and BezierTo here to make the path you want, which is a rectangle the size of the image with two rounded corners. 
ctx.closePath(); 
ctx.clip(); 

// draw the image 
ctx.restore(); // so clipping path won't affect anything else drawn afterwards