HTML5のcanvas要素 - 複雑な図形を描く (円、角丸四角、N角星、N葉っぱ花など)

複雑な図形を描く際には経路を使う。

使用流れ

canvasRenderingContext2DのbeginPaht()で開始する
canvasRenderingContext2Dのメソッドで経路を追加する
- arc
- arcTo
- bezierCurveTo
- lineTo
- moveTo
- quadraticCurveTo
- rect
canvasRenderingContext2DのclosePaht()のメソッドで終了する
canvasRenderingContext2Dのfill()かstroke()で描く

円を描くサンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
   <title> 円を描く </title>
</head>
<body>
<h2> 円を描く </h2>
<canvas id="canvas" width="400" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
   // canvas要素取得
   var canvas = document.getElementById('canvas');
   // CanvasRenderingContext2D取得
   var ctx = canvas.getContext('2d');
   
   for(var i = 0 ; i < 10 ; i++)
   {
       // 経路開始
       ctx.beginPath();
       // 弧追加
       ctx.arc(i * 25, i * 25, (i + 1) * 8, 0, Math.PI * 2, true);
       // 経路終了
       ctx.closePath();
       // 色
       ctx.fillStyle = 'rgba(255, 0, 255, ' + (10 - i) * 0.1 + ')';
       // 描く
       ctx.fill();
   }
</script>
</body>
</html>

f:id:liguofeng29:20160123224530p:plain

角丸四角を描くサンプル

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
    <title> 角丸四角 </title>
</head>
<body>
<h2> 角丸四角を描く </h2>
<canvas id="canvas" width="400" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    /*
        角丸四角を描く
        x,yは座標
        width,heightは幅と高さ
        radiusは角丸の半径
    */
    function createRoundRect(context, x, y, width, height, radius)
    {
        // 左上移動
        ctx.moveTo(x + radius, y);
        // 右上に繋がる線
        ctx.lineTo(x + width - radius, y);
        // 弧
        ctx.arcTo(x + width, y, x + width, y + radius, radius);
        // 右下に繋がる線
        ctx.lineTo(x + width, y + height - radius);
        // 弧
        ctx.arcTo(x + width, y + height, x + width - radius 
            , y + height, radius);
        // 左下に繋がる線
        ctx.lineTo(x + radius, y + height); 
        // 弧
        ctx.arcTo(x, y + height, x, y + height - radius, radius);
        // 右上に繋がる線
        ctx.lineTo(x, y + radius);
        // 弧
        ctx.arcTo(x, y, x + radius, y, radius);
        ctx.closePath();
    }
    // canvas要素取得
    var canvas = document.getElementById('canvas');
    // CanvasRenderingContext2D取得
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 3;
    createRoundRect(ctx, 30, 30, 200, 100, 20);
    ctx.stroke();
</script>
</body>
</html>

f:id:liguofeng29:20160123225408p:plain

星を描くサンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> 多角星を描く </title>
</head>
<body>
<h2> 多角星を描く</h2>
<canvas id="canvas" width="420" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
   /*
       多角を描く
       nは奇数、N角星
       dx,dyは座標
       sizeは大きさ
   */
   function createStar(context, n, dx, dy, size)
   {
       // 経路開始
       context.beginPath();   
       var dig = Math.PI / n * 4;  
       for(var i = 0; i < n ; i++) 
       {  
           var x = Math.sin(i * dig);  
           var y = Math.cos(i * dig);  
           context.lineTo(x * size + dx, y * size + dy);
       }
       context.closePath();  
   }
   // canvas要素取得
   var canvas = document.getElementById('canvas');
   // CanvasRenderingContext2D取得
   var ctx = canvas.getContext('2d');
   // 三角
   createStar(ctx, 3, 60, 60, 50);
   ctx.fillStyle = "#f00";
   ctx.fill();
   // 五角
   createStar(ctx, 5, 160, 60, 50);
   ctx.fillStyle = "#0f0";
   ctx.fill();
   // 七角
   createStar(ctx, 7, 260, 60, 50);
   ctx.fillStyle = "#00f";
   ctx.fill();
   // 九角
   createStar(ctx, 9, 360, 60, 50);
   ctx.fillStyle = "#f0f";
   ctx.fill();
</script>
</body>
</html>

f:id:liguofeng29:20160123230333p:plain

花を描くサンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> 花を描く </title>
</head>
<body>
<h2> 花を描く </h2>
<canvas id="canvas" width="420" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
   /*
       花を描く
       nは葉っぱ枚数
       dx,dyは座標
       sizeは大きさ
       lengthは長さ
   */
   function createFlower(context, n, dx, dy, size, length)
   {
       // 経路開始
       context.beginPath(); 
       context.moveTo(dx, dy + size);
       var dig = 2 * Math.PI / n;
       for(var i = 1; i < n + 1 ; i++) 
       {
           // 制御ポイント座標
           var ctrlX = Math.sin((i - 0.5) * dig) * length + dx;
           var ctrlY= Math.cos((i - 0.5 ) * dig) * length + dy;
           // 終了ポイント座標
           var x = Math.sin(i * dig) * size + dx;
           var y = Math.cos(i * dig) * size + dy; 
           // 2次曲線を描く
           context.quadraticCurveTo(ctrlX, ctrlY, x, y);
       }
       context.closePath();  
   }
   // canvas要素取得
   var canvas = document.getElementById('canvas');
   // CanvasRenderingContext2D取得
   var ctx = canvas.getContext('2d');
   // 5葉っぱ
   createFlower(ctx, 5, 70, 100, 30, 80);
   ctx.fillStyle = "#f00";
   ctx.fill();
   // 6葉っぱ
   createFlower(ctx, 6, 200, 100, 30, 80);
   ctx.fillStyle = "#ff0";
   ctx.fill();
   // 7葉っぱ
   createFlower(ctx, 7, 330, 100, 30, 80);
   ctx.fillStyle = "#f0f";
   ctx.fill();
</script>
</body>
</html>

f:id:liguofeng29:20160123231946p:plain

liguofeng29’s blog

個人勉強用ブログだっす。

HTML5のcanvas要素 - 複雑な図形を描く (円、角丸四角、N角星、N葉っぱ花など)