« jcode.plでdefined(%hash) is deprecated at ../perllib/jcode.pl line 684.のエラー | トップページ | Firefoxを軽くて安全に設定 »

2014年9月29日 (月)

Javascriptで簡単な塗り絵をしてみた

ピクセル単位で色を取得するにはプラグインが必要なようだ。
仕方なく幼稚に遊んでみた。

Palet

上部の四角いカラーパレットをクリックすると,色を取得する。
白い丸をクリックするとそれが取得した色になる。
マウスを動かすと、マウスの通った白丸が取得した色になる。
塗り絵をやめたい白丸をクリックすると塗り絵が止まる。

<html>
<head>
<script type="text/javascript">
var color;
var canPaint=!canPaint;
</script>
<style>
<!--
span {cursor:pointer;}
//-->
</style>
<title>色で遊ぶ</title>
</head>
<body style="background:black">
<span style="color:red" onClick="color=this.style.color;canPaint=false;">■</span>
<span style="color:orange" onClick="color=this.style.color;canPaint=false;">■</span>
<span style="color:yellow" onClick="color=this.style.color;canPaint=false;">■</span>
<span style="color:green" onClick="color=this.style.color;canPaint=false;">■</span>
<span style="color:blue" onClick="color=this.style.color;canPaint=false;">■</span>
<span style="color:pink" onClick="color=this.style.color;canPaint=false;">■</span><br><br>

<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span><br>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span><br>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span><br>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span><br>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span><br>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span><br>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span><br>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span><br>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span><br>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span>
<span style="color:white" onMouseOver="if(canPaint)this.style.color=color;" onClick="this.style.color=color;canPaint=!canPaint;">●</span><br>

</body>
</html>

WindowsなのでShiftjisで保存。
FirefoxでもIEでも動いた。

 

« jcode.plでdefined(%hash) is deprecated at ../perllib/jcode.pl line 684.のエラー | トップページ | Firefoxを軽くて安全に設定 »

2019年9月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          

ブックマーク

無料ブログはココログ