今日の課題：Canvasで二次ベジェ曲線を引く
二次ベジェ曲線
なんかよく分からんが曲線を描ける
使い方難しそう
<!DOCTYPE html>
<html>
<head>
<title>HTML5の練習＠ヒッキープログラミングスレ</title>
<style type="text/css">
body { background-color: silver; }
canvas { background-color: white; }
</style>
</head>
<body>
<h4>二次ベジェ曲線を引く</h4>
<canvas id="mycanvas" width="640" height="480"></canvas>
<script language="javascript" type="text/javascript">
function mydraw() {
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(150, 200, 200, 200);
ctx.quadraticCurveTo(220, 175, 200, 150);
ctx.quadraticCurveTo(125, 50, 250, 150);
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.moveTo(350, 50);
ctx.quadraticCurveTo(350, 85, 400, 120);
ctx.quadraticCurveTo(350, 85, 300, 120);
ctx.quadraticCurveTo(350, 85, 350, 50);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'magenta';
ctx.moveTo(350, 250);
ctx.quadraticCurveTo(390, 265, 400, 320);
ctx.quadraticCurveTo(350, 335, 300, 320);
ctx.quadraticCurveTo(310, 265, 350, 250);
ctx.fill();
}
mydraw();
</script>
</body>
</html>
- quadraticCurveTo(cx,cy,x,y) カレント座標から(x,y)までの直線を(cx,cy)を基準とした二次ベジェ曲線を引く（？）
最終更新：2016年05月14日 06:13
