JavaScript - Canvas - The Canvas Element(Drawing Lots of Circles with a 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)、TRY IT OUT!(No. 3689)を取り組んでみる。

TRY IT OUT!(No. 3689)

コード(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 src="snowman.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,
    center = canvas.width / 2,
    x,
    y;

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();
    }
};

x = center;
y = 65;

ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
circle(x, y, 40, false);

ctx.fillStyle = 'orange';
circle(x, y, 5, true);

ctx.fillStyle = 'black';
x -= 10;
y -= 10;
circle(x, y, 5, true);

x += 20;
circle(x, y, 5, true);

x = center;
y = 165;
circle(x, y, 60, false);

circle(x, y, 5, true);
circle(x, y - 30, 5, true);
circle(x, y + 30, 5, true);

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="snowman1.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'),
    center1 = canvas1.width / 2,
    c1,
    c2,
    eye1,
    eye2,
    nose,
    button1,
    button2,
    button3,
    x1,
    y1;

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

x1 = center1;
y1 = 65;

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 = center1;
y1 = 165;
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';

paper.view.draw();

Kamimura's blog

2016年6月22日水曜日

JavaScript - Canvas - The Canvas Element(Drawing Lots of Circles with a Function, Paper.js library)

0 コメント:

コメントを投稿