processing.js

circle

by uto usui

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="wrap">
	<h1>processing.js</h1>
	<p class="lead">circle</p>
	<canvas id="myCanvas"></canvas>
</div>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet">

SCSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	font-family: 'Dancing Script';
	text-align: center;
  background-image: linear-gradient(-30deg,#f7cac9 20%,#91A8d0 85%);
}

h1 {
	font-size: 42px;
	font-weight: bold;
	color: #32355a;
}

canvas {
	margin: 20px auto;
	border: 3px dashed rgba(#32355a, .55);
  background-color: rgba(white, .15);
}

JavaScript

</script>
<script type="application/processing" data-processing-target="myCanvas">

// キャンバスのサイズ
size(320, 320);

// 円を描く
// ellipse(x, y, w, h)
ellipse(100, 100, 100, 50);


noFill();

// 座標指定の設定
// ellipse(中心のx座標, 中心のy座標, 横直径, 縦直径) デフォルトの値
ellipseMode(CENTER);
ellipse(200, 150, 50, 50);

// ellipse(中心のx座標, 中心のy座標, 横半径, 縦半径)
ellipseMode(RADIUS);
ellipse(200, 150, 50, 50);

// ellipse(ボックス左上頂点のx座標, ボックスの左上頂点のy座標, 横直径, 縦直径)
ellipseMode(CORNER);
ellipse(100, 200, 100, 100);

// ellipse(ボックスの左上頂点のx座標, ボックスの左上頂点のy座標, ボックスの右下頂点のx座標, ボックスの右下頂点のy座標)
ellipseMode(CORNERS);
ellipse(0, 200, 100, 300);