JavaScript - Canvas - The Canvas Element(Drawing Lines or Paths)

開発環境

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)、TRY IT OUT!(No. 3589)を取り組んでみる。

TRY IT OUT!(No. 3589)

コード(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-beta1/jquery.min.js"></script>
    <script src="stickman.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'),
    head = 20,
    width = 4,
    x,
    y,
    tall = head * 5 + width;

ctx.strokeStyle = 'Green';
ctx.lineWidth = width;

ctx.beginPath();
x = canvas.width / 2 - head / 2;
y = (canvas.height - tall) / 2;
ctx.moveTo(x, y);
ctx.lineTo(x + head, y);
ctx.lineTo(x + head, y + head);
ctx.lineTo(x, y + head);
ctx.lineTo(x, y);

x = canvas.width / 2;
y += head;
ctx.moveTo(x, y);
ctx.lineTo(x, y + head * 2);

x = canvas.width / 2;
y += head;
ctx.moveTo(x, y);
ctx.lineTo(x - head, y - head / 2);
ctx.moveTo(x, y);
ctx.lineTo(x + head, y - head / 2);

y += head;
ctx.moveTo(x, y);
ctx.lineTo(x - head, y + head * 2);
ctx.moveTo(x, y);
ctx.lineTo(x + head, y + head * 2);

ctx.stroke();

Kamimura's blog

2016年6月15日水曜日

JavaScript - Canvas - The Canvas Element(Drawing Lines or Paths)

0 コメント:

コメントを投稿