HTML5 > Canvasで弧を描く

今日の課題: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(50, 50);
                ctx.arcTo(120, 180, 200, 200, 200);
                ctx.lineTo(300, 350);
                ctx.stroke();
            }
 
            mydraw();
 
        </script>
    </body>
</html>
 

  • arcTo(x1,y1,x2,y2,r) よくわからん

タグ:

+ タグ編集
  • タグ:
最終更新:2016年05月16日 20:36