JavaScript - Canvas - The Canvas Element(PAINTING WITH YOUR MOUSE, 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、#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();
};

Kamimura's blog

2016年6月26日日曜日

JavaScript - Canvas - The Canvas Element(PAINTING WITH YOUR MOUSE, Paper.js library)

0 コメント:

コメントを投稿