2010/03/01

[html 5][JavaScript]ペイントアプリにリセットボタンを追加

色を選択できるようになったので、次は、元に戻すリセットボタンの追加をしてみたいと思います。

<!DOCTYPE html>
<html>
<head>
<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>
<input type="button" value="Clear"
onclick="DrawInstance.Clear();"
/>

<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;
}

/* clearボタンを押した時に、canvasの中を白紙にする */
DrawClass.prototype.Clear = function(){
this.context.clearRect(0,0,230,230);
};

DrawInstance = new DrawClass();

</script>
</body>
</html>

実行結果はこのような感じです。

                                                
                                       


実行できない場合は、こちらでもう一度試してみてください。

「Clear」ボタンを押すと、描いた絵がリセットされます。

0 コメント:

コメントを投稿