その他
2010年8月25日
【HTML5】Canvasでお絵かきしてみた(前編)
こんにちは、橋本です。
今回はHTML5シリーズ第二弾ということで、canvasを使ってお絵かきしてみました。
今回は前編で、基本的な機能について触れてみたいと思います。
さっそくサンプルコードを以下に。
canvas_sample.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="js/canvas.js" type="text/javascript"></script>
<link media="all" rel="stylesheet" href="css/main.css" type="text/css" />
<title>canvas test</title>
</head>
<body>
<div id="container">
<div id="leftContainer" class="clearfix">
<canvas id="layer0" class="canvas" style="position: absolute; top: 0; left: 0; border: 10px solid #dddddd;" width="900px" height="600px"></canvas>
</div>
<div id="rightContainer">
<div id="controler">
<section id="color">
<ul>
<li>
<label for="red">R:</label>
<input id="red" class="colorBar" type="range" min="0" max="255">
</li>
<li>
<label for="green">G:</label>
<input id="green" class="colorBar" type="range" min="0" max="255">
</li>
<li>
<label for="blue">B:</label>
<input id="blue" class="colorBar" type="range" min="0" max="255">
</li>
<li>
<label for="alpha">A:</label>
<input id="alpha" class="colorBar" type="range" min="0" max="100">
</li>
<li>
<canvas id="colorSample" height="30px" width="30px"></canvas>
<input id="colorText" type="text" value="" readonly="true">
</li>
</ul>
</section>
<section id="line">
<ul>
<li>
<label for="lineWidthRange">line width:</label>
<input id="lineWidthRange" type="range" min="0" max="50">
</li>
<li>
<canvas id="lineSample" width="50" height="50"></canvas>
</li>
</ul>
</section>
<section id="other">
<ul>
<li>
<label for="erase">erase mode:</label>
<input id="erase" type="checkbox" />
</li>
</ul>
</section>
</div>
</div>
</div>
</body>
</html>
canvas.js
(function(){
var canvas,context = null;
var beforeX, beforeY = null;
var isDrawing = false;
var selectedColor;
var colorVars;
var colorText;
var colorSample;
var erase;
var restore;
var lineWidthRange;
var lineWidth;
var lineSample;
var isErase;
window.addEventListener("load", function (event){
canvas = document.getElementById("layer0");
context = canvas.getContext("2d");
erase = document.getElementById("erase");
restore = document.getElementById("restore");
lineWidthRange = document.getElementById("lineWidthRange");
// イベントリスナーの設定
canvas.addEventListener("mousemove", canvas_mouseMoveHandler, false);
canvas.addEventListener("mouseup", canvas_mouseUpHandler, false);
canvas.addEventListener("mousedown", canvas_mouseDownHandler, false);
canvas.addEventListener("mouseout", canvas_mouseOutHandler, false);
erase.addEventListener("click",