JavaScript - Canvas - The Canvas Element(DRAWING AN ARRAY OF POINTS, 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、#2:DRAWING AN ARRAY OF POINTS(No. 3708)を取り組んでみる。

PROGRAMMING CHALLENGES、#2:DRAWING AN ARRAY OF POINTS(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 src="draw_lines.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'),
    mystery_points = [[50, 50], [50, 100], [25, 120], [100, 50], [70, 90],
                      [100, 90], [70, 120]],
    draw_points;

draw_points = function (points) {
    var points0 = points.slice(),
        i,
        max;
    ctx.beginPath();
    ctx.moveTo(points0[0][0], points0[0][1]);

    points0.push(points[0]);
    for (i = 1, max = points0.length; i < max; i += 1) {
        ctx.lineTo(points0[i][0], points0[i][1]);
    }
    ctx.strokeStyle = 'rgb(' + Math.floor(Math.random() * 256) + ',' +
        Math.floor(Math.random() * 256) + ',' +
        Math.floor(Math.random() * 256) + ')';
    ctx.stroke();
};

draw_points(mystery_points);

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="draw_lines1.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, Point, Path*/
var canvas1 = document.querySelector('#canvas1'),
    mystery_points = [[50, 50], [50, 100], [25, 120], [100, 50], [70, 90],
                      [100, 90], [70, 120]],
    draw_lines1,
    i;

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

draw_lines1 = function (points) {
    var points0 = points.slice(),
        from,
        to,
        path,
        i,
        max,
        color;

    points0.push(points0[0]);
    color = 'rgb(' + Math.floor(Math.random() * 256) + ',' +
        Math.floor(Math.random() * 256) + ',' +
        Math.floor(Math.random() * 256) + ')';

    for (i = 0, max = points0.length - 1; i < max; i += 1) {
        from = new Point(points0[i][0], points0[i][1]);
        to = new Point(points0[i + 1][0], points0[i + 1][1]);
        path = new Path.Line(from, to);
        path.strokeColor = color;
    }
};

draw_lines1(mystery_points);

paper.view.draw();

Kamimura's blog

2016年6月25日土曜日

JavaScript - Canvas - The Canvas Element(DRAWING AN ARRAY OF POINTS, Paper.js library)

0 コメント:

コメントを投稿