技術情報
[07] canvasに様々な図形を描く
[コード例]
<canvas id="canvas1" width="500" height="100"></canvas><br>
<br>
<script>
var canvas1 = document.getElementById("canvas1");
var ct1 = canvas1.getContext('2d');
ct1.beginPath();
ct1.fillStyle = '#ff0000';
ct1.fillRect(50, 10, 300, 50);
</script>

[表示例]



[コード例]
<canvas id="canvas2" width="500" height="100"></canvas><br>
<br>
<script>
var canvas2 = document.getElementById("canvas2");
var ct2 = canvas2.getContext('2d');
ct2.beginPath();
ct2.strokeStyle = '#ff0000';
ct2.strokeRect(50, 10, 300, 50);
</script>

[表示例]



[コード例]
<canvas id="canvas3" width="500" height="100"></canvas><br>
<br>
<script>
var canvas3 = document.getElementById("canvas3");
var ct3 = canvas3.getContext('2d');
ct3.beginPath();
ct3.strokeStyle = '#ff0000';
ct3.arc(50, 50, 30, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
ct3.stroke();
</script>

[表示例]



[コード例]
<canvas id="canvas4" width="500" height="100"></canvas><br>
<br>
<script>
var canvas4 = document.getElementById("canvas4");
var ct4 = canvas4.getContext('2d');
ct4.beginPath();
ct4.strokeStyle = '#000000';
ct4.moveTo(30, 30);
ct4.quadraticCurveTo(50, 100, 200, 30);
ct4.stroke();
</script>

[表示例]



[コード例]
<canvas id="canvas5" width="500" height="100"></canvas><br>
<br>
<script>
var canvas5 = document.getElementById("canvas5");
var ct5 = canvas5.getContext('2d');
ct5.beginPath();
ct5.strokeStyle = '#000000';
ct5.moveTo(10, 10);
ct5.arcTo(300, 40, 80, 80, 10);
ct5.stroke();
</script>

[表示例]



[コード例]
<canvas id="canvas6" width="500" height="100"></canvas><br>
<br>
<script>
var canvas6 = document.getElementById("canvas6");
var ct6 = canvas6.getContext('2d');
ct6.beginPath();
ct6.strokeStyle = '#000000';
ct6.moveTo(10, 10);
ct6.bezierCurveTo(100, 100, 300, 10, 400, 100);
ct6.stroke();
</script>

[表示例]