色を選択できるようになったので、次は、元に戻すリセットボタンの追加をしてみたいと思います。
<!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 コメント:
コメントを投稿