昨日のエントリーでFlashを使わずに簡単なお絵かきアプリを作るプログラムを紹介しましたが、今日は、さらに色を選択できるようにしたいと思います。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ペイントTest</title>
<style type="text/css">
#container { position: relative; }
.mousecursor{cursor:pointer;}
</style>
</head>
<body
onMouseUp="DrawInstance.MouseUp();"
>
<div id="container">
<canvas id="draw_canvas"
width="230"
height="230"
style="border:solid 1px #000000;"
onMouseDown="DrawInstance.MouseDown();"
onMouseMove="DrawInstance.MouseMove();"
onMouseUp="DrawInstance.MouseUp();"
onMouseOut="DrawInstance.MouseOut();"
onMouseOver="DrawInstance.MouseOver();"
</canvas>
</div>
<div>
<table border="1" cellpadding="0" cellspacing="0" bordercolor="white">
<tr bordercolor="white">
<td class="mousecursor"
bgcolor="black"
onclick='DrawInstance.setColor("black");'
>
</td>
<td class="mousecursor"
bgcolor="gray"
onclick='DrawInstance.setColor("gray");'
>
</td>
<td class="mousecursor"
bgcolor="maroon"
onclick='DrawInstance.setColor("maroon");'
>
</td>
<td class="mousecursor"
bgcolor="olive"
onclick='DrawInstance.setColor("olive");'
>
</td>
<td class="mousecursor"
bgcolor="red"
onclick='DrawInstance.setColor("red");'
>
</td>
<td class="mousecursor"
bgcolor="fuchsia"
onclick='DrawInstance.setColor("fuchsia");'
>
</td>
<td class="mousecursor"
bgcolor="purple"
onclick='DrawInstance.setColor("purple");'
>
</td>
<td class="mousecursor"
bgcolor="yellow"
onclick='DrawInstance.setColor("yellow");'
>
</td>
<td rowspan="2" colspan="2"
bgcolor="black"
id="settingColor"
>
</td>
</tr>
<tr bordercolor="white">
<td class="mousecursor"
bgcolor="white"
onclick='DrawInstance.setColor("white");'
>
</td>
<td class="mousecursor"
bgcolor="silver"
onclick='DrawInstance.setColor("silver");'
>
</td>
<td class="mousecursor"
bgcolor="blue"
onclick='DrawInstance.setColor("blue");'
>
</td>
<td class="mousecursor"
bgcolor="navy"
onclick='DrawInstance.setColor("navy");'
>
</td>
<td class="mousecursor"
bgcolor="teal"
onclick='DrawInstance.setColor("teal");'
>
</td>
<td class="mousecursor"
bgcolor="aqua"
onclick='DrawInstance.setColor("aqua");'
>
</td>
<td class="mousecursor"
bgcolor="lime"
onclick='DrawInstance.setColor("lime");'
>
</td>
<td class="mousecursor"
bgcolor="green"
onclick='DrawInstance.setColor("green");'
>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var currentlayerX = "";
var currentlayerY = "";
window.onmousemove = (function(evt){
currentlayerX = evt.layerX;
currentlayerY = evt.layerY;
});
DrawClass = function() {
this.canvasinflag = 0;
this.canvas = document.getElementById("draw_canvas");
this.context = this.canvas.getContext("2d");
this.context.strokeStyle = "black";
};
/* マウスをクリックした時 */
DrawClass.prototype.MouseDown = function(){
this.canvasinflag = 1;
this.context.beginPath();
this.context.moveTo(currentlayerX,currentlayerY);
};
/* マウスが動いた時 */
DrawClass.prototype.MouseMove = function(){
if(this.canvasinflag == 1){
this.context.lineTo(currentlayerX,currentlayerY);
this.context.stroke();
this.context.moveTo(currentlayerX,currentlayerY);
}
};
/* クリックした手を離したとき */
DrawClass.prototype.MouseUp = function(){
this.canvasinflag = 0;
this.context.closePath();
};
/* マウスがcanvasの中に入った時 */
DrawClass.prototype.MouseOver = function(){
if(this.canvasinflag == 1){
this.context.beginPath();
this.context.moveTo(currentlayerX,currentlayerY);
}
};
/* マウスがcanvasの外に出た時 */
DrawClass.prototype.MouseOut = function(){
this.context.closePath();
}
/* 線の色を変更する */
DrawClass.prototype.setColor = function(aColorName){
this.context.closePath();
this.context.strokeStyle = aColorName;
document.getElementById("settingColor").style.backgroundColor
= aColorName;
}
DrawInstance = new DrawClass();
</script>
</body>
</html> |
で、実行結果は、このようになります。
(動作しない場合は、
こちらにアクセスして再度、試してみてください。)
例によってfirefoxとchromeで実験した結果、きちんと動いたのですが、IEだとどうだろう？？
使い方としては、色の部分をクリックすると、クリックした色でペイントすることができるようになります。
ペイントの仕方は、前回と同様で、四角い枠の中でドラッグしながらマウスを動かすと線が描かれます。
0 コメント:
コメントを投稿