プログラミングとイラストレーション » 歩行アニメーション|HTML5
プログラミングとイラストレーション > HTML5 > 歩行アニメーション|HTML5

歩行アニメーション|HTML5

歩行アニメーション|HTML5

歩行アニメーション|HTML5(HTML5, JavaScript, CSS3) : デモ

歩行アニメーション|HTML5(HTML5, JavaScript, CSS3) : ZIPファイル(5kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=320, user-scalable=no maximum-scale=1">
        <title>requestAnimationFrame</title>
        <link href="css/base.css" rel="stylesheet" type="text/css">
        <script src="js/base.js"></script>
    </head>
    <body>
       <div id="contents">
          <canvas id="stage" width="320" height="416"></canvas>
        </div>
    </body>
</html>

2.CSS

@charset "utf-8";
  
body
{
    margin:0;
    padding:0;
    background-color: #fff;
}
 
#contents
{ 
    position: absolute; 
    top: 0;
    left: 0;
    width: 319px; 
    height: 415px;
    -webkit-transform-origin: 0 0;
    -webkit-transform:scale(0.8);
}
 
#stage
{ 
    position: absolute;
    top: 0;
    left: 0; 
    width: 319px;
    height: 415px;
    background-color: #e6e6e6;
}

3.JavaScript

base.js

window.addEventListener("load", init, false);
  
function init()
{
    var i = 0,
    ctx;
     
    ctx = document.getElementById("stage").getContext("2d");
    animationLoop();
     
    function animationLoop()
    {
        render();
        requestAnimationFrame(animationLoop);
    }
     
    function render()
    {
        i += 1;
        if(i === 96)
        {
            i = 1;
        }
         
        switch(i)
        {
            case 1:
                setClearCanvas(ctx);
                cut1(ctx);
                break;
            case 12:
                setClearCanvas(ctx);
                cut2(ctx);
                break;
            case 24:
                setClearCanvas(ctx);
                cut3(ctx);
                break;
            case 36:
                setClearCanvas(ctx);
                cut4(ctx);
                break;
            case 48:
                setClearCanvas(ctx);
                cut5(ctx);
                break;
            case 60:
                setClearCanvas(ctx);
                cut6(ctx);
                break;
            case 72:
                setClearCanvas(ctx);
                cut7(ctx);
                break;
            case 84:
                setClearCanvas(ctx);
                cut8(ctx);
                break;
            default:
                break;
        }
    }
}
 
function setClearCanvas(ctx)
{
    ctx.clearRect(0, 0, 320, 416);
}
 
function cut1(ctx) {
    // selectedItems/
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(145.0, 139.9);
    ctx.lineTo(133.8, 178.3);
    ctx.lineTo(109.5, 210.0);
    ctx.lineTo(110.0, 216.5);
    ctx.lineTo(110.0, 227.5);
    ctx.lineTo(101.3, 233.5);
    ctx.lineTo(91.8, 229.3);
    ctx.lineTo(91.3, 220.0);
    ctx.lineTo(98.0, 206.0);
    ctx.lineTo(118.0, 170.0);
    ctx.lineTo(128.4, 134.2);
    ctx.lineTo(145.0, 139.9);
    ctx.closePath();
    ctx.fillStyle = "rgb(50, 50, 50)";
    ctx.fill();
 
    // selectedItems/
    ctx.beginPath();
    ctx.moveTo(191.8, 292.3);
    ctx.lineTo(230.3, 363.3);
    ctx.lineTo(203.5, 376.5);
    ctx.lineTo(162.8, 308.0);
    ctx.lineTo(153.0, 264.3);
    ctx.lineTo(182.5, 226.8);
    ctx.lineTo(191.8, 292.3);
    ctx.closePath();
    ctx.fill();
 
    // selectedItems/
    ctx.beginPath();
    ctx.moveTo(183.0, 75.5);
    ctx.lineTo(127.0, 75.5);
    ctx.lineTo(127.0, 11.8);
    ctx.lineTo(183.0, 11.8);
    ctx.lineTo(183.0, 75.5);
    ctx.closePath();
    ctx.fillStyle = "rgb(152, 152, 152)";
    ctx.fill();
 
    // selectedItems/
    ctx.beginPath();
    ctx.moveTo(166.5, 88.3);
    ctx.lineTo(143.3, 88.3);
    ctx.lineTo(143.3, 71.0);
    ctx.lineTo(166.5, 71.0);
    ctx.lineTo(166.5, 88.3);
    ctx.closePath();
    ctx.fill();
 
    // selectedItems/
    ctx.beginPath();
    ctx.moveTo(179.8, 194.8);
    ctx.lineTo(130.3, 194.5);
    ctx.lineTo(127.8, 122.8);
    ctx.lineTo(142.5, 88.3);
    ctx.lineTo(166.3, 82.8);
    ctx.lineTo(182.0, 106.8);
    ctx.lineTo(178.8, 161.5);
    ctx.lineTo(179.8, 194.8);
    ctx.closePath();
    ctx.fill();
 
    // selectedItems/
    ctx.beginPath();
    ctx.moveTo(238.3, 374.7);
    ctx.lineTo(200.0, 405.0);
    ctx.lineTo(195.9, 397.0);
    ctx.lineTo(207.0, 374.5);
    ctx.lineTo(229.7, 362.8);
    ctx.lineTo(238.3, 374.7);
    ctx.closePath();
    ctx.fillStyle = "rgb(50, 50, 50)";
    ctx.fill();
 
    // selectedItems/
    ctx.beginPath();
    ctx.moveTo(134.0, 391.0);
    ctx.lineTo(102.8, 381.5);
    ctx.lineTo(115.3, 300.5);
    ctx.lineTo(134.5, 230.0);
    ctx.lineTo(130.5, 190.3);
    ctx.lineTo(178.5, 187.8);
    ctx.lineTo(185.3, 227.0);
    ctx.lineTo(149.3, 305.5);
    ctx.lineTo(134.0, 391.0);
    ctx.closePath();
    ctx.fillStyle = "rgb(152, 152, 152)";
    ctx.fill();
 
    // selectedItems/
    ctx.beginPath();
    ctx.moveTo(105.3, 381.8);
    ctx.lineTo(130.5, 388.8);
    ctx.lineTo(125.5, 404.3);
    ctx.lineTo(79.5, 391.5);
    ctx.lineTo(82.3, 383.5);
    ctx.lineTo(105.3, 381.8);
    ctx.closePath();
    ctx.fill();
 
    // selectedItems/
    ctx.beginPath();
    ctx.moveTo(203.3, 165.8);
    ctx.lineTo(201.8, 220.3);
    ctx.lineTo(205.3, 235.5);
    ctx.lineTo(197.3, 244.8);
    ctx.lineTo(183.3, 244.0);
    ctx.lineTo(181.5, 227.8);
    ctx.lineTo(189.0, 219.5);
    ctx.lineTo(184.3, 171.0);
    ctx.lineTo(159.1, 112.5);
    ctx.lineTo(180.1, 103.6);
    ctx.lineTo(203.3, 165.8);
    ctx.closePath();
    ctx.fillStyle = "rgb(203, 203, 203)";
    ctx.fill();
 
    // selectedItems/
    ctx.beginPath();
    ctx.moveTo(0.0, 0.0);
    ctx.lineTo(1.0, 0.0);
    ctx.lineTo(1.0, 1.0);
    ctx.lineTo(0.0, 1.0);
    ctx.lineTo(0.0, 0.0);
    ctx.closePath();
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fill();
    ctx.restore();
}
 
function cut2(ctx)
{
    // selectedItems/
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(145.0, 133.0);
      ctx.lineTo(162.0, 137.3);
      ctx.lineTo(152.0, 176.0);
      ctx.lineTo(132.5, 210.0);
      ctx.lineTo(133.5, 216.5);
      ctx.lineTo(134.4, 227.5);
      ctx.lineTo(126.1, 234.2);
      ctx.lineTo(116.3, 230.7);
      ctx.lineTo(115.0, 221.5);
      ctx.lineTo(120.6, 207.0);
      ctx.lineTo(135.5, 168.0);
      ctx.lineTo(145.0, 133.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(153.0, 264.3);
      ctx.lineTo(180.3, 226.8);
      ctx.lineTo(188.3, 300.5);
      ctx.lineTo(234.8, 346.3);
      ctx.lineTo(218.3, 371.5);
      ctx.lineTo(161.0, 318.8);
      ctx.lineTo(153.0, 264.3);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(183.0, 73.8);
      ctx.lineTo(127.0, 73.8);
      ctx.lineTo(127.0, 10.0);
      ctx.lineTo(183.0, 10.0);
      ctx.lineTo(183.0, 73.8);
      ctx.closePath();
      ctx.fillStyle = "rgb(152, 152, 152)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(166.5, 86.5);
      ctx.lineTo(143.3, 86.5);
      ctx.lineTo(143.3, 69.3);
      ctx.lineTo(166.5, 69.3);
      ctx.lineTo(166.5, 86.5);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(179.8, 191.5);
      ctx.lineTo(130.3, 191.3);
      ctx.lineTo(127.8, 119.5);
      ctx.lineTo(142.5, 85.0);
      ctx.lineTo(166.3, 79.5);
      ctx.lineTo(182.0, 103.5);
      ctx.lineTo(178.8, 158.3);
      ctx.lineTo(179.8, 191.5);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(217.8, 366.0);
      ctx.lineTo(234.1, 346.3);
      ctx.lineTo(246.8, 353.8);
      ctx.lineTo(223.5, 396.8);
      ctx.lineTo(216.5, 391.1);
      ctx.lineTo(217.8, 366.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(134.5, 230.0);
      ctx.lineTo(130.5, 190.3);
      ctx.lineTo(178.5, 187.8);
      ctx.lineTo(185.3, 227.0);
      ctx.lineTo(161.5, 307.3);
      ctx.lineTo(156.8, 391.3);
      ctx.lineTo(122.3, 388.3);
      ctx.lineTo(127.5, 296.0);
      ctx.lineTo(134.5, 230.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(152, 152, 152)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(156.0, 388.0);
      ctx.lineTo(155.3, 404.3);
      ctx.lineTo(108.0, 404.3);
      ctx.lineTo(108.1, 395.6);
      ctx.lineTo(129.8, 387.8);
      ctx.lineTo(156.0, 388.0);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(195.7, 167.4);
      ctx.lineTo(192.0, 221.2);
      ctx.lineTo(193.3, 236.8);
      ctx.lineTo(184.0, 244.8);
      ctx.lineTo(170.2, 242.0);
      ctx.lineTo(170.8, 225.7);
      ctx.lineTo(179.4, 218.6);
      ctx.lineTo(176.2, 169.9);
      ctx.lineTo(159.6, 108.4);
      ctx.lineTo(181.7, 102.6);
      ctx.lineTo(195.7, 167.4);
      ctx.closePath();
      ctx.fillStyle = "rgb(203, 203, 203)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(1.0, 0.0);
      ctx.lineTo(1.0, 1.0);
      ctx.lineTo(0.0, 1.0);
      ctx.lineTo(0.0, 0.0);
      ctx.lineTo(1.0, 0.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 255, 255)";
      ctx.fill();
      ctx.restore();
}
 
function cut3(ctx)
{
    // selectedItems/
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(135.3, 214.3);
      ctx.lineTo(182.5, 226.8);
      ctx.lineTo(166.8, 301.0);
      ctx.lineTo(195.5, 358.0);
      ctx.lineTo(173.8, 375.0);
      ctx.lineTo(124.5, 298.0);
      ctx.lineTo(135.3, 214.3);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(183.0, 72.5);
      ctx.lineTo(127.0, 72.5);
      ctx.lineTo(127.0, 8.8);
      ctx.lineTo(183.0, 8.8);
      ctx.lineTo(183.0, 72.5);
      ctx.closePath();
      ctx.fillStyle = "rgb(152, 152, 152)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(166.5, 85.3);
      ctx.lineTo(143.3, 85.3);
      ctx.lineTo(143.3, 68.0);
      ctx.lineTo(166.5, 68.0);
      ctx.lineTo(166.5, 85.3);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(179.8, 191.3);
      ctx.lineTo(130.3, 191.0);
      ctx.lineTo(127.8, 119.3);
      ctx.lineTo(142.5, 84.8);
      ctx.lineTo(166.3, 79.3);
      ctx.lineTo(182.0, 103.3);
      ctx.lineTo(178.8, 158.0);
      ctx.lineTo(179.8, 191.3);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(172.7, 372.4);
      ctx.lineTo(194.3, 358.9);
      ctx.lineTo(204.0, 370.0);
      ctx.lineTo(168.2, 403.5);
      ctx.lineTo(163.5, 395.8);
      ctx.lineTo(172.7, 372.4);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(135.3, 218.3);
      ctx.lineTo(130.5, 190.3);
      ctx.lineTo(178.5, 183.5);
      ctx.lineTo(186.5, 218.0);
      ctx.lineTo(181.3, 229.0);
      ctx.lineTo(182.3, 300.0);
      ctx.lineTo(183.3, 391.3);
      ctx.lineTo(150.8, 389.8);
      ctx.lineTo(147.3, 299.5);
      ctx.lineTo(141.5, 226.0);
      ctx.lineTo(135.3, 218.3);
      ctx.closePath();
      ctx.fillStyle = "rgb(152, 152, 152)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(182.9, 388.6);
      ctx.lineTo(182.2, 405.0);
      ctx.lineTo(135.0, 404.3);
      ctx.lineTo(135.0, 396.0);
      ctx.lineTo(156.7, 388.4);
      ctx.lineTo(182.9, 388.6);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(181.4, 168.8);
      ctx.lineTo(167.2, 221.0);
      ctx.lineTo(165.0, 236.5);
      ctx.lineTo(154.2, 242.2);
      ctx.lineTo(141.4, 236.5);
      ctx.lineTo(145.5, 220.8);
      ctx.lineTo(155.5, 215.7);
      ctx.lineTo(161.8, 166.9);
      ctx.lineTo(159.3, 103.3);
      ctx.lineTo(182.0, 102.5);
      ctx.lineTo(181.4, 168.8);
      ctx.closePath();
      ctx.fillStyle = "rgb(203, 203, 203)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(1.0, 1.0);
      ctx.lineTo(0.0, 1.0);
      ctx.lineTo(0.0, 0.0);
      ctx.lineTo(1.0, 0.0);
      ctx.lineTo(1.0, 1.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 255, 255)";
      ctx.fill();
      ctx.restore();
}
 
function cut4(ctx)
{
    // selectedItems/
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(133.0, 218.5);
      ctx.lineTo(130.5, 190.3);
      ctx.lineTo(178.5, 187.8);
      ctx.lineTo(183.8, 222.8);
      ctx.lineTo(150.3, 301.8);
      ctx.lineTo(151.0, 381.8);
      ctx.lineTo(119.3, 381.3);
      ctx.lineTo(116.0, 294.8);
      ctx.lineTo(133.0, 218.5);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(181.8, 104.5);
      ctx.lineTo(191.3, 167.3);
      ctx.lineTo(181.5, 206.0);
      ctx.lineTo(184.0, 213.8);
      ctx.lineTo(185.3, 222.8);
      ctx.lineTo(183.2, 230.8);
      ctx.lineTo(172.8, 230.7);
      ctx.lineTo(168.7, 222.4);
      ctx.lineTo(169.3, 206.8);
      ctx.lineTo(173.5, 165.9);
      ctx.lineTo(169.0, 128.9);
      ctx.lineTo(181.8, 104.5);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(134.5, 226.8);
      ctx.lineTo(129.8, 187.0);
      ctx.lineTo(180.3, 184.5);
      ctx.lineTo(188.5, 220.3);
      ctx.lineTo(185.0, 233.3);
      ctx.lineTo(192.3, 306.5);
      ctx.lineTo(216.8, 381.8);
      ctx.lineTo(184.0, 389.5);
      ctx.lineTo(159.3, 313.5);
      ctx.lineTo(144.8, 238.5);
      ctx.lineTo(134.5, 226.8);
      ctx.closePath();
      ctx.fillStyle = "rgb(152, 152, 152)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(183.0, 74.5);
      ctx.lineTo(127.0, 74.5);
      ctx.lineTo(127.0, 10.8);
      ctx.lineTo(183.0, 10.8);
      ctx.lineTo(183.0, 74.5);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(166.5, 86.8);
      ctx.lineTo(143.3, 86.8);
      ctx.lineTo(143.3, 69.5);
      ctx.lineTo(166.5, 69.5);
      ctx.lineTo(166.5, 86.8);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(179.8, 192.8);
      ctx.lineTo(130.3, 192.5);
      ctx.lineTo(127.8, 120.8);
      ctx.lineTo(142.5, 86.3);
      ctx.lineTo(166.3, 80.8);
      ctx.lineTo(182.0, 104.8);
      ctx.lineTo(178.8, 159.5);
      ctx.lineTo(179.8, 192.8);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(216.3, 381.8);
      ctx.lineTo(219.8, 396.0);
      ctx.lineTo(174.5, 404.8);
      ctx.lineTo(172.8, 396.0);
      ctx.lineTo(184.8, 389.0);
      ctx.lineTo(216.3, 381.8);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(102.5, 387.3);
      ctx.lineTo(124.2, 379.4);
      ctx.lineTo(150.4, 379.3);
      ctx.lineTo(149.9, 395.6);
      ctx.lineTo(102.5, 395.3);
      ctx.lineTo(102.5, 387.3);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(165.0, 172.5);
      ctx.lineTo(136.3, 217.3);
      ctx.lineTo(130.8, 234.3);
      ctx.lineTo(117.5, 236.3);
      ctx.lineTo(110.3, 227.8);
      ctx.lineTo(116.8, 212.8);
      ctx.lineTo(126.5, 210.5);
      ctx.lineTo(145.8, 169.0);
      ctx.lineTo(155.1, 98.3);
      ctx.lineTo(177.6, 101.8);
      ctx.lineTo(165.0, 172.5);
      ctx.closePath();
      ctx.fillStyle = "rgb(203, 203, 203)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(0.0, 1.0);
      ctx.lineTo(0.0, 0.0);
      ctx.lineTo(1.0, 0.0);
      ctx.lineTo(1.0, 1.0);
      ctx.lineTo(0.0, 1.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 255, 255)";
      ctx.fill();
      ctx.restore();
}
 
function cut5(ctx)
{
    // selectedItems/
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(142.5, 303.5);
      ctx.lineTo(127.0, 389.5);
      ctx.lineTo(95.8, 380.8);
      ctx.lineTo(108.5, 297.0);
      ctx.lineTo(133.3, 212.0);
      ctx.lineTo(130.5, 190.3);
      ctx.lineTo(178.5, 187.8);
      ctx.lineTo(179.3, 217.5);
      ctx.lineTo(142.5, 303.5);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(181.3, 106.5);
      ctx.lineTo(201.0, 166.2);
      ctx.lineTo(197.9, 206.0);
      ctx.lineTo(201.8, 211.3);
      ctx.lineTo(207.8, 220.5);
      ctx.lineTo(203.8, 230.3);
      ctx.lineTo(193.5, 231.8);
      ctx.lineTo(188.0, 224.3);
      ctx.lineTo(186.1, 208.9);
      ctx.lineTo(181.8, 166.8);
      ctx.lineTo(163.3, 124.0);
      ctx.lineTo(181.3, 106.5);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(133.0, 218.0);
      ctx.lineTo(130.3, 190.5);
      ctx.lineTo(179.0, 187.3);
      ctx.lineTo(189.3, 218.0);
      ctx.lineTo(189.5, 232.8);
      ctx.lineTo(197.0, 291.8);
      ctx.lineTo(236.0, 363.5);
      ctx.lineTo(209.3, 376.5);
      ctx.lineTo(169.3, 308.3);
      ctx.lineTo(145.8, 234.3);
      ctx.lineTo(133.0, 218.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(152, 152, 152)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(183.0, 75.5);
      ctx.lineTo(127.0, 75.5);
      ctx.lineTo(127.0, 11.8);
      ctx.lineTo(183.0, 11.8);
      ctx.lineTo(183.0, 75.5);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(166.5, 88.3);
      ctx.lineTo(143.3, 88.3);
      ctx.lineTo(143.3, 71.0);
      ctx.lineTo(166.5, 71.0);
      ctx.lineTo(166.5, 88.3);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(179.8, 194.8);
      ctx.lineTo(130.3, 194.5);
      ctx.lineTo(127.8, 122.8);
      ctx.lineTo(142.5, 88.3);
      ctx.lineTo(166.3, 82.8);
      ctx.lineTo(182.0, 106.8);
      ctx.lineTo(178.8, 161.5);
      ctx.lineTo(179.8, 194.8);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(238.3, 374.7);
      ctx.lineTo(201.5, 403.5);
      ctx.lineTo(195.9, 397.0);
      ctx.lineTo(207.0, 374.5);
      ctx.lineTo(229.7, 362.8);
      ctx.lineTo(238.3, 374.7);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(74.8, 383.0);
      ctx.lineTo(97.8, 381.3);
      ctx.lineTo(123.0, 388.3);
      ctx.lineTo(118.0, 403.8);
      ctx.lineTo(72.0, 390.8);
      ctx.lineTo(74.8, 383.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(150.3, 101.5);
      ctx.lineTo(172.3, 107.0);
      ctx.lineTo(153.5, 170.6);
      ctx.lineTo(119.6, 213.3);
      ctx.lineTo(113.3, 227.6);
      ctx.lineTo(101.4, 230.2);
      ctx.lineTo(90.6, 221.2);
      ctx.lineTo(99.0, 207.1);
      ctx.lineTo(109.9, 205.0);
      ctx.lineTo(135.2, 163.4);
      ctx.lineTo(150.3, 101.5);
      ctx.closePath();
      ctx.fillStyle = "rgb(203, 203, 203)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(0.0, 0.0);
      ctx.lineTo(1.0, 0.0);
      ctx.lineTo(1.0, 1.0);
      ctx.lineTo(0.0, 1.0);
      ctx.lineTo(0.0, 0.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 255, 255)";
      ctx.fill();
      ctx.restore();
}
 
function cut6(ctx)
{
    // selectedItems/
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(157.3, 308.3);
      ctx.lineTo(152.5, 390.8);
      ctx.lineTo(118.3, 389.0);
      ctx.lineTo(123.5, 297.8);
      ctx.lineTo(133.3, 212.0);
      ctx.lineTo(130.5, 190.3);
      ctx.lineTo(178.5, 187.8);
      ctx.lineTo(179.3, 217.5);
      ctx.lineTo(157.3, 308.3);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(191.3, 165.0);
      ctx.lineTo(182.3, 209.0);
      ctx.lineTo(182.0, 215.3);
      ctx.lineTo(180.3, 224.0);
      ctx.lineTo(171.5, 230.0);
      ctx.lineTo(162.0, 225.8);
      ctx.lineTo(158.0, 215.8);
      ctx.lineTo(170.0, 203.3);
      ctx.lineTo(173.5, 161.5);
      ctx.lineTo(160.5, 118.3);
      ctx.lineTo(181.3, 103.3);
      ctx.lineTo(191.3, 165.0);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(134.5, 218.8);
      ctx.lineTo(130.8, 191.8);
      ctx.lineTo(180.3, 191.3);
      ctx.lineTo(187.8, 218.5);
      ctx.lineTo(185.8, 227.3);
      ctx.lineTo(193.5, 295.8);
      ctx.lineTo(240.3, 343.3);
      ctx.lineTo(223.8, 367.0);
      ctx.lineTo(163.8, 310.5);
      ctx.lineTo(141.3, 228.5);
      ctx.lineTo(134.5, 218.8);
      ctx.closePath();
      ctx.fillStyle = "rgb(152, 152, 152)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(183.0, 73.3);
      ctx.lineTo(127.0, 73.3);
      ctx.lineTo(127.0, 9.5);
      ctx.lineTo(183.0, 9.5);
      ctx.lineTo(183.0, 73.3);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(166.5, 86.0);
      ctx.lineTo(143.3, 86.0);
      ctx.lineTo(143.3, 68.8);
      ctx.lineTo(166.5, 68.8);
      ctx.lineTo(166.5, 86.0);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(179.8, 192.3);
      ctx.lineTo(130.3, 192.0);
      ctx.lineTo(127.8, 120.3);
      ctx.lineTo(142.5, 85.8);
      ctx.lineTo(166.3, 80.3);
      ctx.lineTo(182.0, 104.3);
      ctx.lineTo(178.8, 159.0);
      ctx.lineTo(179.8, 192.3);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(223.7, 361.3);
      ctx.lineTo(241.0, 342.5);
      ctx.lineTo(253.2, 350.7);
      ctx.lineTo(228.8, 390.0);
      ctx.lineTo(220.9, 386.2);
      ctx.lineTo(223.7, 361.3);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(152.4, 388.3);
      ctx.lineTo(151.8, 404.7);
      ctx.lineTo(104.8, 404.8);
      ctx.lineTo(104.5, 396.3);
      ctx.lineTo(126.1, 388.5);
      ctx.lineTo(152.4, 388.3);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(163.8, 168.6);
      ctx.lineTo(136.7, 215.9);
      ctx.lineTo(132.6, 231.0);
      ctx.lineTo(121.1, 235.4);
      ctx.lineTo(109.1, 228.2);
      ctx.lineTo(115.3, 213.0);
      ctx.lineTo(125.8, 209.3);
      ctx.lineTo(144.5, 164.3);
      ctx.lineTo(150.0, 100.9);
      ctx.lineTo(172.8, 103.0);
      ctx.lineTo(163.8, 168.6);
      ctx.closePath();
      ctx.fillStyle = "rgb(203, 203, 203)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(1.0, 0.0);
      ctx.lineTo(1.0, 1.0);
      ctx.lineTo(0.0, 1.0);
      ctx.lineTo(0.0, 0.0);
      ctx.lineTo(1.0, 0.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 255, 255)";
      ctx.fill();
      ctx.restore();
}
 
function cut7(ctx)
{
    // selectedItems/
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(146.0, 306.3);
      ctx.lineTo(153.0, 264.3);
      ctx.lineTo(182.5, 226.8);
      ctx.lineTo(182.8, 293.5);
      ctx.lineTo(184.3, 390.5);
      ctx.lineTo(150.5, 390.3);
      ctx.lineTo(146.0, 306.3);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(183.0, 72.3);
      ctx.lineTo(127.0, 72.3);
      ctx.lineTo(127.0, 8.5);
      ctx.lineTo(183.0, 8.5);
      ctx.lineTo(183.0, 72.3);
      ctx.closePath();
      ctx.fillStyle = "rgb(152, 152, 152)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(166.5, 85.0);
      ctx.lineTo(143.3, 85.0);
      ctx.lineTo(143.3, 67.8);
      ctx.lineTo(166.5, 67.8);
      ctx.lineTo(166.5, 85.0);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(179.8, 191.3);
      ctx.lineTo(130.3, 191.0);
      ctx.lineTo(127.8, 119.3);
      ctx.lineTo(142.5, 84.8);
      ctx.lineTo(166.3, 79.3);
      ctx.lineTo(182.0, 103.3);
      ctx.lineTo(178.8, 158.0);
      ctx.lineTo(179.8, 191.3);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(184.5, 389.6);
      ctx.lineTo(184.0, 404.3);
      ctx.lineTo(136.8, 404.5);
      ctx.lineTo(136.8, 396.0);
      ctx.lineTo(159.4, 385.0);
      ctx.lineTo(184.5, 389.6);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(135.0, 216.3);
      ctx.lineTo(130.5, 190.3);
      ctx.lineTo(178.5, 187.8);
      ctx.lineTo(187.0, 218.3);
      ctx.lineTo(160.3, 292.8);
      ctx.lineTo(195.8, 357.5);
      ctx.lineTo(166.8, 369.3);
      ctx.lineTo(124.8, 299.0);
      ctx.lineTo(135.0, 216.3);
      ctx.closePath();
      ctx.fillStyle = "rgb(152, 152, 152)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(155.1, 383.5);
      ctx.lineTo(171.5, 367.3);
      ctx.lineTo(195.3, 356.3);
      ctx.lineTo(201.6, 371.4);
      ctx.lineTo(158.8, 391.8);
      ctx.lineTo(155.1, 383.5);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(181.8, 168.0);
      ctx.lineTo(165.0, 219.8);
      ctx.lineTo(164.0, 235.5);
      ctx.lineTo(153.8, 242.1);
      ctx.lineTo(140.5, 237.4);
      ctx.lineTo(143.5, 221.3);
      ctx.lineTo(153.0, 215.5);
      ctx.lineTo(162.2, 167.6);
      ctx.lineTo(154.6, 104.5);
      ctx.lineTo(177.3, 101.9);
      ctx.lineTo(181.8, 168.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(203, 203, 203)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(1.0, 1.0);
      ctx.lineTo(0.0, 1.0);
      ctx.lineTo(0.0, 0.0);
      ctx.lineTo(1.0, 0.0);
      ctx.lineTo(1.0, 1.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 255, 255)";
      ctx.fill();
      ctx.restore();
}
 
function cut8(ctx)
{
    // selectedItems/
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(157.8, 134.8);
      ctx.lineTo(151.7, 174.3);
      ctx.lineTo(131.8, 208.9);
      ctx.lineTo(133.1, 215.3);
      ctx.lineTo(134.5, 226.2);
      ctx.lineTo(126.6, 233.3);
      ctx.lineTo(116.6, 230.3);
      ctx.lineTo(115.0, 221.2);
      ctx.lineTo(119.9, 206.5);
      ctx.lineTo(135.0, 168.1);
      ctx.lineTo(140.7, 131.3);
      ctx.lineTo(157.8, 134.8);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(153.0, 264.3);
      ctx.lineTo(182.5, 226.8);
      ctx.lineTo(189.8, 304.3);
      ctx.lineTo(214.3, 381.3);
      ctx.lineTo(181.5, 389.0);
      ctx.lineTo(156.0, 311.0);
      ctx.lineTo(153.0, 264.3);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(183.0, 75.5);
      ctx.lineTo(127.0, 75.5);
      ctx.lineTo(127.0, 11.8);
      ctx.lineTo(183.0, 11.8);
      ctx.lineTo(183.0, 75.5);
      ctx.closePath();
      ctx.fillStyle = "rgb(152, 152, 152)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(166.5, 88.3);
      ctx.lineTo(143.3, 88.3);
      ctx.lineTo(143.3, 71.0);
      ctx.lineTo(166.5, 71.0);
      ctx.lineTo(166.5, 88.3);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(179.8, 194.8);
      ctx.lineTo(130.3, 194.5);
      ctx.lineTo(127.8, 122.8);
      ctx.lineTo(142.5, 88.3);
      ctx.lineTo(166.3, 82.8);
      ctx.lineTo(182.0, 106.8);
      ctx.lineTo(178.8, 161.5);
      ctx.lineTo(179.8, 194.8);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(189.0, 380.3);
      ctx.lineTo(212.8, 376.5);
      ctx.lineTo(217.8, 394.5);
      ctx.lineTo(171.5, 404.0);
      ctx.lineTo(169.0, 395.4);
      ctx.lineTo(189.0, 380.3);
      ctx.closePath();
      ctx.fillStyle = "rgb(50, 50, 50)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(133.8, 225.3);
      ctx.lineTo(130.5, 190.3);
      ctx.lineTo(178.5, 187.8);
      ctx.lineTo(186.3, 219.8);
      ctx.lineTo(156.3, 297.0);
      ctx.lineTo(155.5, 382.0);
      ctx.lineTo(124.5, 381.3);
      ctx.lineTo(121.3, 294.3);
      ctx.lineTo(133.8, 225.3);
      ctx.closePath();
      ctx.fillStyle = "rgb(152, 152, 152)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(108.0, 387.2);
      ctx.lineTo(125.0, 379.5);
      ctx.lineTo(155.9, 379.0);
      ctx.lineTo(155.3, 395.3);
      ctx.lineTo(108.0, 395.5);
      ctx.lineTo(108.0, 387.2);
      ctx.closePath();
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(197.8, 166.7);
      ctx.lineTo(192.9, 221.1);
      ctx.lineTo(195.5, 236.5);
      ctx.lineTo(187.0, 245.2);
      ctx.lineTo(173.0, 243.6);
      ctx.lineTo(172.3, 227.3);
      ctx.lineTo(180.2, 219.5);
      ctx.lineTo(178.4, 170.8);
      ctx.lineTo(158.0, 115.3);
      ctx.lineTo(181.3, 106.3);
      ctx.lineTo(197.8, 166.7);
      ctx.closePath();
      ctx.fillStyle = "rgb(203, 203, 203)";
      ctx.fill();
 
      // selectedItems/
      ctx.beginPath();
      ctx.moveTo(0.0, 1.0);
      ctx.lineTo(0.0, 0.0);
      ctx.lineTo(1.0, 0.0);
      ctx.lineTo(1.0, 1.0);
      ctx.lineTo(0.0, 1.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 255, 255)";
      ctx.fill();
      ctx.restore();
}
 
// 各ブラウザ対応
window.requestAnimationFrame = (function()
{
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback)
    {
        window.setTimeout(callback, 1000/60);
    };
}());

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントフィード

トラックバック URL : http://www.htmlcode.jp/%e6%ad%a9%e8%a1%8c%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%ef%bd%9chtml5/trackback/