2016年6月22日水曜日

開発環境

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

0 コメント:

コメントを投稿

Comments on Google+: