JavaScript - Canvas - The Canvas Element(SNOWMAN-DRAWING FUNCTION, Paper.js library)

開発環境

OS X El Capitan - Apple (OS)
Emacs (Text Editor)
JavaScript (プログラミング言語)
jQuery (Library)
Safari(Web browser)

Javascript for Kids (Nick Morgan 著、Angus Croll 寄稿、Miran Lipovaca イラスト、No Starch Press)のPart 3(Canvas)、Chapter 13(The Canvas Element)、PROGRAMMING CHALLENGES、#1:A SNOWMAN-DRAWING FUNCTION(No. 3708)を取り組んでみる。

PROGRAMMING CHALLENGES、#1:A SNOWMAN-DRAWING FUNCTION(No. 3708)

コード(Emacs)


<!doctype html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <canvas id="canvas0" width="650" height="250"
            style="border:solid brown; border-radius:10px">
    </canvas>
    
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="sample1.js"></script>
  </body>
</html>


/*jslint         browser : true, continue : true,
  devel  : true, indent  : 4,    maxerr   : 50,
  newcap : true, nomen   : false, plusplus : false,
  regexp : false, sloppy  : true, vars     : false,
  white  : false
*/
/*global */
var canvas = document.querySelector('#canvas0'),
    ctx = canvas.getContext('2d'),
    circle,
    draw_snowman,
    x,
    y,
    i;

circle = function (x, y, radius, fill_circle) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    if (fill_circle) {
        ctx.fill();
    } else {
        ctx.stroke();
    }
};
draw_snowman = function (x, y) {
    var x0 = x,
        y0 = y - 60;

    ctx.strokeStyle = 'black';
    ctx.lineWidth = 5;
    circle(x0, y0, 40, false);

    ctx.fillStyle = 'orange';
    circle(x0, y0, 5, true);

    ctx.fillStyle = 'black';
    x0 -= 10;
    y0 -= 10;
    circle(x0, y0, 5, true);

    x0 += 20;
    circle(x0, y0, 5, true);

    x0 = x;
    y0 += 110;
    circle(x0, y0, 60, false);

    circle(x0, y0, 5, true);
    circle(x0, y0 - 30, 5, true);
    circle(x0, y0 + 30, 5, true);
};

// draw_snowman(canvas.width / 2, 125);

for (i = 0; i < 5; i  += 1) {
    draw_snowman(Math.random() * 650, Math.random() * 250);
}

Paper.js library を使用した場合。(参考書籍: Learning JavaScript)

コード(Emacs)


<!doctype html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <canvas id="canvas1" width="650" height="250"
            style="border:solid brown; border-radius:10px">
    </canvas>
    
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.min.js"></script>
    <script src="sample12.js"></script>
  </body>
</html>


/*jslint         browser : true, continue : true,
  devel  : true, indent  : 4,    maxerr   : 50,
  newcap : true, nomen   : false, plusplus : false,
  regexp : false, sloppy  : true, vars     : false,
  white  : false
*/
/*global paper, Shape*/
var canvas1 = document.querySelector('#canvas1'),
    draw_snowman1,
    i;

paper.install(window);
paper.setup(canvas1);

draw_snowman1 = function (x, y) {
    var x1 = x,
        y1 = y - 60,
        c1,
        c2,
        eye1,
        eye2,
        nose,
        button1,
        button2,
        button3;

    c1 = Shape.Circle(x1, y1, 40);
    c1.strokeColor = 'black';
    c1.strokeWidth = 5;

    nose = Shape.Circle(x1, y1, 5);
    nose.fillColor = 'orange';

    x1 -= 10;
    y1 -= 10;
    eye1 = Shape.Circle(x1, y1, 5);
    eye1.fillColor = 'black';

    x1 += 20;
    eye2 = Shape.Circle(x1, y1, 5);
    eye2.fillColor = 'black';

    x1 = x;
    y1 += 110;
    c2 = Shape.Circle(x1, y1, 60);
    c2.strokeColor = 'black';
    c2.strokeWidth = 5;

    button1 = Shape.Circle(x1, y1, 5);
    button1.fillColor = 'black';

    button2 = Shape.Circle(x1, y1 - 30, 5);
    button2.fillColor = 'black';

    button3 = Shape.Circle(x1, y1 + 30, 5);
    button3.fillColor = 'black';

};
for (i = 0; i < 5; i += 1) {
    draw_snowman1(Math.random() * canvas1.width,
                  Math.random() * canvas1.height);
}

paper.view.draw();

Kamimura's blog

2016年6月24日金曜日

JavaScript - Canvas - The Canvas Element(SNOWMAN-DRAWING FUNCTION, Paper.js library)

0 コメント:

コメントを投稿