こんにちは、橋本です。
今回は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", erase_clickHandler, false);
lineWidthRange.addEventListener("change", lineWidthRange_changeHandler, false);
//controlerの設定
colorBars = document.getElementsByClassName("colorBar");
var obj = {};
length = colorBars.length;
for (var i = 0; i < length; i++)
{
var bar = colorBars[i];
bar.value = bar.id == "alpha" ? 100 : 0;
bar.addEventListener("change", colorBar_changeHandler, false);
obj[bar.id] = bar.value;
}
colorSample = document.getElementById("colorSample");
colorText = document.getElementById("colorText");
var colorStr = convertColorObjToStr(obj);
setColorText(colorStr);
setSelectedColor(colorStr);
setColorSample();
lineWidthRange.value = 10;
lineWidth = 10;
lineSample =