開発環境
- 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();
0 コメント:
コメントを投稿