JavaScript - Konva.js - 丸を描く




クラウディア　












1.　概要			


2.　丸を描く		


3.　参考サイト	




1.　概要


　丸を描いてみます。
　というか、提供元のソースをそのままコピペしたら、丸になっていたのだ。
　前ページじでインストールしたパッケージでなく、ウェブのパッケージを使用しています。


2.　丸を描く


　本コンテンツに、下記を記述します。



<script src="https://unpkg.com/konva@9/konva.min.js"></script>
<div id="container"></div>
<script>
// ステージを作成（キャンバス全体）
const stage = new Konva.Stage({
	container: 'container',
	width: 500,
	height: 350
});

// レイヤーを作成
const layer = new Konva.Layer();
stage.add(layer);

// 丸を作成
const circle = new Konva.Circle({
	x: 250,       // 中心のX座標
	y: 150,       // 中心のY座標
	radius: 80,   // 半径
	fill: 'red',  // 塗りつぶし色
	stroke: 'black', // 枠線色
	strokeWidth: 4
});

// レイヤーに追加
layer.add(circle);

// レイヤーを描画
layer.draw();
</script>



　実際、この下に書いておるわけですが。
　（ブラウザでコンテンツのソースをご覧いただければ、わかるかと思います「konva.min.js」のソースの「URL」のみ異なります）
　下記のように表示されます。






3.　参考サイト


　本ページは、下記のサイトおよび、「ChatGPT」くんを参考にさせていただきました。


「Getting started with Vue and Canvas via Konva | Konva - JavaScript Canvas 2d Library」







AbemaTV　無料体験