描画をコピーする方法

締切済

質問者：零礼
質問日時：2020/12/30 09:19
回答数：2件

首記の件、教えて頂きたく。
canvasで描画を作成しています。
これを題名の通り花びらの角度を変えて複製する方法がありましたら教えて頂きたくお願い致します。

イメージとして添付画像の様にしたいです。

下記ソースコードは花びらの上の部分を描画したものです。
//init
const canvas = document.getElementById('test');
const context = canvas.getContext('2d');
const WIDTH = $('#test').get(0).width = $(window).width();
const HEIGHT =$('#test').get(0).height = $(window).height();

// 右側の線
context.beginPath();
context.moveTo(270,50);
context.quadraticCurveTo(300, 50, 260, 150);

//下側の円弧
context.moveTo(260,150);
context.quadraticCurveTo(240, 165, 230, 150);

//左側の円弧
context.quadraticCurveTo(210, 50, 230, 50);

//上側の線
context.moveTo(230,50);
context.lineTo(250,80);
context.lineTo(270,50);

//線全体のの色と太さ
context.lineWidth = 8;
context.strokeStyle = 'rgb(255,204,255)';

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2020/12/30 17:20

No1です。

添付の画像は直線と円弧だけで描いているのかもしれませんが、ベジェを利用したほうが調節がしやすいので、そちらの例を作ってみました。

不連続点を作ると交点の処理が面倒なので、花弁1枚を連続パスで描いています。
ですので、繰り返しは、角度を変えて5回のみとなっています。
※ 制御点をずらすことで、花弁を太らせたり痩せさせたり、あるいはハート型のようにと変えることも可能です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title></head>
<body>

<canvas width="400" height="400" id="test"></canvas>

<script>
const
canvas = document.getElementById('test'),
ctx = canvas.getContext('2d'),
sin = Math.sin(Math.PI * 2/5),
cos = Math.cos(Math.PI * 2/5);

//花弁ひとつ分のパス
let p = new Path2D();
p.moveTo(-10, 130);
p.lineTo(0, 110);
p.lineTo(10, 130);
p.bezierCurveTo(45, 95, 25, 20, 0, 20);
p.bezierCurveTo(-25, 20, -45, 95, -10, 130);
p.closePath();

ctx.lineWidth = 8;
ctx.strokeStyle = 'rgb(255, 180, 210)';

ctx.save();
ctx.transform(-1, 0, 0, -1, 250, 180);
for(let i=0; i<5; i++){
ctx.stroke(p);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.restore();
</script>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2020/12/30 11:09

こんにちは

添付図のような対照的な図を描きたいのか、ご提示のスクリプトように下手ウマ的な図にしたいのかわかりませんが、添付図のようなものであると仮定して・・・

中心点に座標の中心を移動したうえで、
　①花弁の半分を描画
　②ｘ軸を逆転して（線対象で）、再度①を描く
　　（花弁ひとつが完成）
　③座標軸を1/5回転（72°）して、①②を計5回繰り返す
で、できると思われます。

実際に図を描いているのは①だけで、座標軸を移動しながら、これを全部で10回繰り返すことになります。
②、③は順序を逆転しても、結果は同じになります。

ついでながら、角度の違う線分を別々に描いてつなげると、ご提示のスクリプトのように口が開く可能性があります。
意図的にそうしている場合はそれでよいのですが、対象描性を利用して重ねて描くような場合は、LineCapをroundなどにしておくことで、何気につながるようになると思います。
（甘いエッジになるので、それが嫌なら連続線で描くのがよいでしょう）