開発環境
- 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、#3:PAINTING WITH YOUR MOUSE(No. 3720)を取り組んでみる。
PROGRAMMING CHALLENGES、#3:PAINTING WITH YOUR MOUSE(No. 3720)
コード(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="mouse.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'),
$canvas = $('#canvas0'),
circle,
radius = 3;
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();
}
};
$canvas.mousemove(function (event) {
var pos = $canvas.offset();
ctx.fillStyle = 'rgb(' + Math.floor(Math.random() * 256) + ',' +
Math.floor(Math.random() * 256) + ',' +
Math.floor(Math.random() * 256) + ')';
circle(event.pageX - pos.left, event.pageY - pos.top, radius, 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/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.min.js"></script>
<script src="mouse1.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, Shape, Tool*/
var canvas1 = document.querySelector('#canvas1'),
radius = 3,
tool;
paper.install(window);
paper.setup(canvas1);
tool = new Tool();
tool.onMouseMove = function (event) {
var center = new Point(event.point.x, event.point.y),
circle = new Shape.Circle(center, radius);
circle.fillColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' +
Math.floor(Math.random() * 256) + ',' +
Math.floor(Math.random() * 256) + ')';
paper.view.draw();
};
0 コメント:
コメントを投稿