2016年6月15日水曜日

開発環境

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();

0 コメント:

コメントを投稿

Comments on Google+: