開発環境
- 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. 3533)を取り組んでみる。
TRY IT OUT!(No. 3533)
コード(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="try1.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'),
canvas_width = canvas.width,
canvas_height = canvas.height,
ctx = canvas.getContext('2d'),
width = 50,
height = 100,
x = (canvas_width - 3 * width) / 2,
y = (canvas_height - height) / 2;
ctx.fillStyle = 'OrangeRed';
ctx.fillRect(x, y, width, height);
x += width;
ctx.fillStyle = 'Red';
ctx.fillRect(x, y, width, height);
x += width;
ctx.fillStyle = 'DarkRed';
ctx.fillRect(x, y, width, height);
0 コメント:
コメントを投稿