HTML5 Canvas 颜色选择器
- WBOY原创
- 2016-05-17 09:09:382220浏览
<p>这段代码是用<a title="HTML5" href="http://www.xyhtml5.com/"></a>HTML5来创建一个网页颜色选择器。首先在Canvas画一幅图，然后添加鼠标事件
“鼠标移动”，“鼠标点击”。在鼠标移动的时候，显示当前划过的颜色预览，在鼠标点击的时候，选中当前颜色，显示颜色的细节。<br>
</p>
<p>DEMO： <a style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; OUTLINE-WIDTH: 0px; PADDING-RIGHT: 0px; COLOR: rgb(68,102,187); PADDING-TOP: 0px" href="http://www.oschina.net/uploads/demo/example158/" target="_blank">http://www.oschina.net/uploads/demo/example158/ </a></p>
<h3>
<i style="PADDING-BOTTOM: 0px; FONT-STYLE: normal; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-WEIGHT: normal; PADDING-TOP: 0px">[代码]</i> [HTML]代码</h3>
<p>
</p>
<div>
<div id="highlighter_122243" class="syntaxhighlighter xhtml ie">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr><td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="xhtml plain"><!DOCTYPE html> </code></div>
<div class="line number2 index1 alt1"><code class="xhtml plain"><</code><code class="xhtml keyword">html</code> <code class="xhtml color1">lang</code><code class="xhtml plain">=</code><code class="xhtml string">"en"</code> <code class="xhtml plain">> </code></div>
<div class="line number3 index2 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">head</code><code class="xhtml plain">> </code>
</div>
<div class="line number4 index3 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">meta</code> <code class="xhtml color1">charset</code><code class="xhtml plain">=</code><code class="xhtml string">"utf-8"</code> <code class="xhtml plain">/> </code>
</div>
<div class="line number5 index4 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">title</code><code class="xhtml plain">><</code><code class="xhtml keyword">A</code> <code class="xhtml color1">title</code><code class="xhtml plain">=</code><code class="xhtml string">HTML5</code> <code class="xhtml color1">href</code><code class="xhtml plain">=</code><code class="xhtml string">"<a href="http://www.xyhtml5.com/">http://www.xyhtml5.com/<code class="xhtml string">"<a href="http://www.xyhtml5.com/">http://www.xyhtml5.com/</a>"</code>"</code><code class="xhtml plain">>HTML5</</code><code class="xhtml keyword">A</code><code class="xhtml plain">> canvas - Image color picker | Script Tutorials</</code><code class="xhtml keyword">title</code><code class="xhtml plain">> </code>
</div>
<div class="line number6 index5 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">link</code> <code class="xhtml color1">href</code><code class="xhtml plain">=</code><code class="xhtml string">"<A title=css href="</code><code class="xhtml plain"><a href="http://www.xyhtml5.com/css3">http://www.xyhtml5.com/css3<code class="xhtml plain"><a href="http://www.xyhtml5.com/css3">http://www.xyhtml5.com/css3</a>">css</</code>">css</</code><code class="xhtml keyword">A</code><code class="xhtml plain">>/main.<</code><code class="xhtml keyword">A</code> <code class="xhtml color1">title</code><code class="xhtml plain">=</code><code class="xhtml string">css</code> <code class="xhtml color1">href</code><code class="xhtml plain">=</code><code class="xhtml string">"<a href="http://www.xyhtml5.com/css3">http://www.xyhtml5.com/css3<code class="xhtml string">"<a href="http://www.xyhtml5.com/css3">http://www.xyhtml5.com/css3</a>"</code>"</code><code class="xhtml plain">>css</</code><code class="xhtml keyword">A</code><code class="xhtml plain">>" rel="stylesheet" type="text/css" /> </code>
</div>
<div class="line number7 index6 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">script</code> <code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text/<A title=javascript href="</code><code class="xhtml plain"><a href="http://www.xyhtml5.com/javascript">http://www.xyhtml5.com/javascript<code class="xhtml plain"><a href="http://www.xyhtml5.com/javascript">http://www.xyhtml5.com/javascript</a>">javascript</</code>">javascript</</code><code class="xhtml keyword">A</code><code class="xhtml plain">>" src="js/jquery-1.5.2.min.js"></</code><code class="xhtml keyword">script</code><code class="xhtml plain">> </code>
</div>
<div class="line number8 index7 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">script</code><code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text/<A title=javascript href="</code><code class="xhtml plain"><a href="http://www.xyhtml5.com/javascript">http://www.xyhtml5.com/javascript</a>">javascript</</code><code class="xhtml keyword">A</code><code class="xhtml plain">>" src="js/script.js"></</code><code class="xhtml keyword">script</code><code class="xhtml plain">> </code>
</div>
<div class="line number9 index8 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">head</code><code class="xhtml plain">> </code>
</div>
<div class="line number10 index9 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">body</code><code class="xhtml plain">> </code>
</div>
<div class="line number11 index10 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml color1">class</code><code class="xhtml plain">=</code><code class="xhtml string">"container"</code><code class="xhtml plain">> </code>
</div>
<div class="line number12 index11 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml color1">class</code><code class="xhtml plain">=</code><code class="xhtml string">"column1"</code><code class="xhtml plain">> </code>
</div>
<div class="line number13 index12 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">canvas</code><code class="xhtml color1">id</code><code class="xhtml plain">=</code><code class="xhtml string">"panel"</code> <code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"500"</code><code class="xhtml color1">height</code><code class="xhtml plain">=</code><code class="xhtml string">"333"</code><code class="xhtml plain">></</code><code class="xhtml keyword">canvas</code><code class="xhtml plain">> </code>
</div>
<div class="line number14 index13 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number15 index14 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml color1">class</code><code class="xhtml plain">=</code><code class="xhtml string">"column2"</code><code class="xhtml plain">> </code>
</div>
<div class="line number16 index15 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml plain">><</code><code class="xhtml keyword">input</code><code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"button"</code> <code class="xhtml color1">value</code><code class="xhtml plain">=</code><code class="xhtml string">"Next image"</code> <code class="xhtml color1">id</code><code class="xhtml plain">=</code><code class="xhtml string">"swImage"</code> <code class="xhtml plain">/></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number17 index16 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml plain">>Preview:</</code><code class="xhtml keyword">div</code> <code class="xhtml plain">> </code>
</div>
<div class="line number18 index17 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml color1">id</code><code class="xhtml plain">=</code><code class="xhtml string">"preview"</code><code class="xhtml plain">></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number19 index18 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml plain">>Color:</</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number20 index19 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml plain">>R: <</code><code class="xhtml keyword">input</code><code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text"</code><code class="xhtml color1">id</code><code class="xhtml plain">=</code><code class="xhtml string">"rVal"</code><code class="xhtml plain">/></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number21 index20 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml plain">>G: <</code><code class="xhtml keyword">input</code><code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text"</code><code class="xhtml color1">id</code><code class="xhtml plain">=</code><code class="xhtml string">"gVal"</code><code class="xhtml plain">/></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code> </div>
<div class="line number22 index21 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml plain">>B: <</code><code class="xhtml keyword">input</code><code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text"</code><code class="xhtml color1">id</code><code class="xhtml plain">=</code><code class="xhtml string">"bVal"</code><code class="xhtml plain">/></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number23 index22 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml plain">>RGB: <</code><code class="xhtml keyword">input</code><code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text"</code><code class="xhtml color1">id</code><code class="xhtml plain">=</code><code class="xhtml string">"rgbVal"</code><code class="xhtml plain">/></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number24 index23 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml plain">>RGBA: <</code><code class="xhtml keyword">input</code> <code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text"</code> <code class="xhtml color1">id</code><code class="xhtml plain">=</code><code class="xhtml string">"rgbaVal"</code><code class="xhtml plain">/></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number25 index24 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml plain">>HEX: <</code><code class="xhtml keyword">input</code> <code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text"</code> <code class="xhtml color1">id</code><code class="xhtml plain">=</code><code class="xhtml string">"hexVal"</code><code class="xhtml plain">/></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number26 index25 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">hr</code><code class="xhtml plain">/> </code>
</div>
<div class="line number27 index26 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number28 index27 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">div</code><code class="xhtml color1">style</code><code class="xhtml plain">=</code><code class="xhtml string">"clear:both;"</code><code class="xhtml plain">></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number29 index28 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">div</code><code class="xhtml plain">> </code>
</div>
<div class="line number30 index29 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">footer</code><code class="xhtml plain">> </code> </div>
<div class="line number31 index30 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">h2</code><code class="xhtml plain">>HTML5 canvas - Image color picker</</code><code class="xhtml keyword">h2</code><code class="xhtml plain">> </code>
</div>
<div class="line number32 index31 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">a</code><code class="xhtml color1">href</code><code class="xhtml plain">=</code><code class="xhtml string">"<a href="http://www.script-tutorials.com/html5-canvas-image-color-picker/">http://www.script-tutorials.com/html5-canvas-image-color-picker/</a>"</code><code class="xhtml color1">class</code><code class="xhtml plain">=</code><code class="xhtml string">"stuts"</code><code class="xhtml plain">>Back to original tutorial on <</code><code class="xhtml keyword">span</code><code class="xhtml plain">>Script Tutorials</</code><code class="xhtml keyword">span</code><code class="xhtml plain">></</code><code class="xhtml keyword">a</code><code class="xhtml plain">> </code>
</div>
<div class="line number33 index32 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">footer</code><code class="xhtml plain">> </code>
</div>
<div class="line number34 index33 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">body</code><code class="xhtml plain">> </code>
</div>
<div class="line number35 index34 alt2"><code class="xhtml plain"></</code><code class="xhtml keyword">html</code><code class="xhtml plain">></code></div>
</div>
</td></tr>
</tbody>
</table>
</div>
</div>
<p>
</p>
<h3>[CSS]代码</h3>
<p>
</p>
<div>
<div id="highlighter_670327" class="syntaxhighlighter css ie">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr><td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="css plain">*{ </code></div>
<div class="line number2 index1 alt1">
<code class="css spaces"> </code><code class="css keyword">margin</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">; </code>
</div>
<div class="line number3 index2 alt2">
<code class="css spaces"> </code><code class="css keyword">padding</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">; </code>
</div>
<div class="line number4 index3 alt1"><code class="css plain">} </code></div>
<div class="line number5 index4 alt2">
<code class="css spaces"> </code> </div>
<div class="line number6 index5 alt1"><code class="css plain">body { </code></div>
<div class="line number7 index6 alt2">
<code class="css spaces"> </code><code class="css keyword">background-color</code><code class="css plain">:</code><code class="css value">#bababa</code><code class="css plain">; </code>
</div>
<div class="line number8 index7 alt1">
<code class="css spaces"> </code><code class="css keyword">color</code><code class="css plain">:</code><code class="css value">#fff</code><code class="css plain">; </code>
</div>
<div class="line number9 index8 alt2">
<code class="css spaces"> </code><code class="css keyword">font</code><code class="css plain">:</code><code class="css value">14px</code><code class="css plain">/</code><code class="css value">1.3</code> <code class="css color1">Arial</code><code class="css plain">,</code><code class="css color1">sans-serif</code><code class="css plain">; </code>
</div>
<div class="line number10 index9 alt1"><code class="css plain">} </code></div>
<div class="line number11 index10 alt2">
<code class="css spaces"> </code> </div>
<div class="line number12 index11 alt1"><code class="css plain">footer { </code></div>
<div class="line number13 index12 alt2">
<code class="css spaces"> </code><code class="css keyword">background-color</code><code class="css plain">:</code><code class="css value">#212121</code><code class="css plain">; </code>
</div>
<div class="line number14 index13 alt1">
<code class="css spaces"> </code><code class="css keyword">bottom</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">; </code>
</div>
<div class="line number15 index14 alt2">
<code class="css spaces"> </code><code class="css plain">box-shadow: </code><code class="css value">0</code> <code class="css value">-1px</code> <code class="css value">2px</code> <code class="css value">#111111</code><code class="css plain">; </code>
</div>
<div class="line number16 index15 alt1">
<code class="css spaces"> </code><code class="css keyword">display</code><code class="css plain">:</code><code class="css value">block</code><code class="css plain">; </code>
</div>
<div class="line number17 index16 alt2">
<code class="css spaces"> </code><code class="css keyword">height</code><code class="css plain">:</code><code class="css value">70px</code><code class="css plain">; </code>
</div>
<div class="line number18 index17 alt1">
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">; </code>
</div>
<div class="line number19 index18 alt2">
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">fixed</code><code class="css plain">; </code>
</div>
<div class="line number20 index19 alt1">
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">100%</code><code class="css plain">; </code>
</div>
<div class="line number21 index20 alt2">
<code class="css spaces"> </code><code class="css keyword">z-index</code><code class="css plain">:</code><code class="css value">100</code><code class="css plain">; </code>
</div>
<div class="line number22 index21 alt1"><code class="css plain">} </code></div>
<div class="line number23 index22 alt2">
<code class="css spaces"> </code> </div>
<div class="line number24 index23 alt1">
<code class="css plain">footer h</code><code class="css value">2</code><code class="css plain">{ </code>
</div>
<div class="line number25 index24 alt2">
<code class="css spaces"> </code><code class="css keyword">font-size</code><code class="css plain">:</code><code class="css value">22px</code><code class="css plain">; </code>
</div>
<div class="line number26 index25 alt1">
<code class="css spaces"> </code><code class="css keyword">font-weight</code><code class="css plain">:</code><code class="css value">normal</code><code class="css plain">; </code>
</div>
<div class="line number27 index26 alt2">
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">50%</code><code class="css plain">; </code>
</div>
<div class="line number28 index27 alt1">
<code class="css spaces"> </code><code class="css keyword">margin-left</code><code class="css plain">:</code><code class="css value">-400px</code><code class="css plain">; </code>
</div>
<div class="line number29 index28 alt2">
<code class="css spaces"> </code><code class="css keyword">padding</code><code class="css plain">:</code><code class="css value">22px</code><code class="css value">0</code><code class="css plain">; </code>
</div>
<div class="line number30 index29 alt1">
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">absolute</code><code class="css plain">; </code>
</div>
<div class="line number31 index30 alt2">
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">540px</code><code class="css plain">; </code>
</div>
<div class="line number32 index31 alt1"><code class="css plain">} </code></div>
<div class="line number33 index32 alt2">
<code class="css spaces"> </code> </div>
<div class="line number34 index33 alt1"> <code class="css plain">footer a.stuts,a.stuts:visited{ </code>
</div>
<div class="line number35 index34 alt2">
<code class="css spaces"> </code><code class="css keyword">border</code><code class="css plain">:</code><code class="css value">none</code><code class="css plain">; </code>
</div>
<div class="line number36 index35 alt1">
<code class="css spaces"> </code><code class="css keyword">text-decoration</code><code class="css plain">:</code><code class="css value">none</code><code class="css plain">; </code>
</div>
<div class="line number37 index36 alt2">
<code class="css spaces"> </code><code class="css keyword">color</code><code class="css plain">:</code><code class="css value">#fcfcfc</code><code class="css plain">; </code>
</div>
<div class="line number38 index37 alt1">
<code class="css spaces"> </code><code class="css keyword">font-size</code><code class="css plain">:</code><code class="css value">14px</code><code class="css plain">; </code>
</div>
<div class="line number39 index38 alt2">
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">50%</code><code class="css plain">; </code>
</div>
<div class="line number40 index39 alt1">
<code class="css spaces"> </code><code class="css keyword">line-height</code><code class="css plain">:</code><code class="css value">31px</code><code class="css plain">; </code>
</div>
<div class="line number41 index40 alt2">
<code class="css spaces"> </code><code class="css keyword">margin</code><code class="css plain">:</code><code class="css value">23px</code> <code class="css value">0</code> <code class="css value">0</code> <code class="css value">110px</code><code class="css plain">; </code>
</div>
<div class="line number42 index41 alt1">
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">absolute</code><code class="css plain">; </code>
</div>
<div class="line number43 index42 alt2">
<code class="css spaces"> </code><code class="css keyword">top</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">; </code>
</div>
<div class="line number44 index43 alt1"><code class="css plain">} </code></div>
<div class="line number45 index44 alt2">
<code class="css spaces"> </code> </div>
<div class="line number46 index45 alt1"><code class="css plain">footer .stuts span { </code></div>
<div class="line number47 index46 alt2">
<code class="css spaces"> </code><code class="css keyword">font-size</code><code class="css plain">:</code><code class="css value">22px</code><code class="css plain">; </code>
</div>
<div class="line number48 index47 alt1">
<code class="css spaces"> </code><code class="css keyword">font-weight</code><code class="css plain">:</code><code class="css value">bold</code><code class="css plain">; </code>
</div>
<div class="line number49 index48 alt2">
<code class="css spaces"> </code><code class="css keyword">margin-left</code><code class="css plain">:</code><code class="css value">5px</code><code class="css plain">; </code>
</div>
<div class="line number50 index49 alt1"><code class="css plain">} </code></div>
<div class="line number51 index50 alt2">
<code class="css spaces"> </code> </div>
<div class="line number52 index51 alt1"><code class="css plain">.container { </code></div>
<div class="line number53 index52 alt2">
<code class="css spaces"> </code><code class="css keyword">color</code><code class="css plain">:</code><code class="css value">#000</code><code class="css plain">; </code>
</div>
<div class="line number54 index53 alt1">
<code class="css spaces"> </code><code class="css keyword">margin</code><code class="css plain">:</code><code class="css value">20px</code><code class="css value">auto</code><code class="css plain">; </code>
</div>
<div class="line number55 index54 alt2">
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">relative</code><code class="css plain">; </code>
</div>
<div class="line number56 index55 alt1">
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">730px</code><code class="css plain">; </code>
</div>
<div class="line number57 index56 alt2"><code class="css plain">} </code></div>
<div class="line number58 index57 alt1">
<code class="css spaces"> </code> </div>
<div class="line number59 index58 alt2">
<code class="css plain">.column</code><code class="css value">1</code><code class="css plain">{ </code>
</div>
<div class="line number60 index59 alt1">
<code class="css spaces"> </code><code class="css keyword">float</code><code class="css plain">:</code><code class="css value">left</code><code class="css plain">; </code>
</div>
<div class="line number61 index60 alt2">
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">500px</code><code class="css plain">; </code>
</div>
<div class="line number62 index61 alt1"><code class="css plain">} </code></div>
<div class="line number63 index62 alt2">
<code class="css spaces"> </code> </div>
<div class="line number64 index63 alt1">
<code class="css plain">.column</code><code class="css value">2</code><code class="css plain">{ </code>
</div>
<div class="line number65 index64 alt2">
<code class="css spaces"> </code><code class="css keyword">float</code><code class="css plain">:</code><code class="css value">left</code><code class="css plain">; </code>
</div>
<div class="line number66 index65 alt1">
<code class="css spaces"> </code><code class="css keyword">padding-left</code><code class="css plain">:</code><code class="css value">20px</code><code class="css plain">; </code>
</div>
<div class="line number67 index66 alt2">
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">170px</code> <code class="css plain">; </code>
</div>
<div class="line number68 index67 alt1"><code class="css plain">} </code></div>
<div class="line number69 index68 alt2">
<code class="css spaces"> </code> </div>
<div class="line number70 index69 alt1"><code class="css plain">#panel { </code></div>
<div class="line number71 index70 alt2">
<code class="css spaces"> </code><code class="css keyword">border</code><code class="css plain">:</code><code class="css value">1px</code> <code class="css value">#000</code> <code class="css value">solid</code><code class="css plain">; </code>
</div>
<div class="line number72 index71 alt1">
<code class="css spaces"> </code><code class="css plain">box-shadow:</code><code class="css value">4px</code> <code class="css value">6px</code> <code class="css value">6px</code> <code class="css value">#444444</code><code class="css plain">; </code>
</div>
<div class="line number73 index72 alt2">
<code class="css spaces"> </code><code class="css keyword">cursor</code><code class="css plain">:</code><code class="css value">crosshair</code><code class="css plain">; </code>
</div>
<div class="line number74 index73 alt1"><code class="css plain">} </code></div>
<div class="line number75 index74 alt2">
<code class="css spaces"> </code> </div>
<div class="line number76 index75 alt1">
<code class="css plain">.column</code><code class="css value">2</code><code class="css plain">> div { </code>
</div>
<div class="line number77 index76 alt2">
<code class="css spaces"> </code><code class="css keyword">margin-bottom</code><code class="css plain">:</code><code class="css value">10px</code><code class="css plain">; </code>
</div>
<div class="line number78 index77 alt1"><code class="css plain">} </code></div>
<div class="line number79 index78 alt2">
<code class="css spaces"> </code> </div>
<div class="line number80 index79 alt1"><code class="css plain">#swImage { </code></div>
<div class="line number81 index80 alt2">
<code class="css spaces"> </code><code class="css keyword">border</code><code class="css plain">:</code><code class="css value">1px</code><code class="css value">#000</code><code class="css value">solid</code><code class="css plain">; </code>
</div>
<div class="line number82 index81 alt1">
<code class="css spaces"> </code><code class="css plain">box-shadow:</code><code class="css value">2px</code><code class="css value">3px</code><code class="css value">3px</code><code class="css value">#444444</code><code class="css plain">; </code>
</div>
<div class="line number83 index82 alt2">
<code class="css spaces"> </code><code class="css keyword">cursor</code><code class="css plain">:</code><code class="css value">pointer</code><code class="css plain">; </code>
</div>
<div class="line number84 index83 alt1">
<code class="css spaces"> </code><code class="css keyword">height</code><code class="css plain">:</code><code class="css value">25px</code><code class="css plain">; </code>
</div>
<div class="line number85 index84 alt2">
<code class="css spaces"> </code> <code class="css keyword">line-height</code><code class="css plain">:</code><code class="css value">25px</code><code class="css plain">; </code>
</div>
<div class="line number86 index85 alt1">
<code class="css spaces"> </code> </div>
<div class="line number87 index86 alt2">
<code class="css spaces"> </code><code class="css plain">border-radius:</code><code class="css value">3px</code><code class="css plain">; </code>
</div>
<div class="line number88 index87 alt1">
<code class="css spaces"> </code><code class="css plain">-moz-border-radius:</code><code class="css value">3px</code><code class="css plain">; </code>
</div>
<div class="line number89 index88 alt2">
<code class="css spaces"> </code><code class="css plain">-webkit-border-radius:</code><code class="css value">3px</code><code class="css plain">; </code>
</div>
<div class="line number90 index89 alt1"><code class="css plain">} </code></div>
<div class="line number91 index90 alt2">
<code class="css spaces"> </code> </div>
<div class="line number92 index91 alt1"><code class="css plain">#swImage:hover { </code></div>
<div class="line number93 index92 alt2">
<code class="css spaces"> </code><code class="css keyword">margin-left</code><code class="css plain">:</code><code class="css value">2px</code><code class="css plain">; </code>
</div>
<div class="line number94 index93 alt1"><code class="css plain">} </code></div>
<div class="line number95 index94 alt2">
<code class="css spaces"> </code> </div>
<div class="line number96 index95 alt1">
<code class="css plain">#preview { </code> </div>
<div class="line number97 index96 alt2">
<code class="css spaces"> </code><code class="css keyword">border</code><code class="css plain">:</code><code class="css value">1px</code> <code class="css value">#000</code> <code class="css value">solid</code><code class="css plain">; </code>
</div>
<div class="line number98 index97 alt1">
<code class="css spaces"> </code><code class="css plain">box-shadow:</code><code class="css value">2px</code> <code class="css value">3px</code> <code class="css value">3px</code> <code class="css value">#444444</code><code class="css plain">; </code>
</div>
<div class="line number99 index98 alt2">
<code class="css spaces"> </code><code class="css keyword">height</code><code class="css plain">:</code><code class="css value">80px</code><code class="css plain">; </code>
</div>
<div class="line number100 index99 alt1">
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">80px</code><code class="css plain">; </code>
</div>
<div class="line number101 index100 alt2">
<code class="css spaces"> </code> </div>
<div class="line number102 index101 alt1">
<code class="css spaces"> </code><code class="css plain">border-radius:</code><code class="css value">3px</code><code class="css plain">; </code>
</div>
<div class="line number103 index102 alt2">
<code class="css spaces"> </code><code class="css plain">-moz-border-radius:</code><code class="css value">3px</code><code class="css plain">; </code>
</div>
<div class="line number104 index103 alt1">
<code class="css spaces"> </code><code class="css plain">-webkit-border-radius:</code><code class="css value">3px</code><code class="css plain">; </code>
</div>
<div class="line number105 index104 alt2"><code class="css plain">} </code></div>
<div class="line number106 index105 alt1">
<code class="css spaces"> </code> </div>
<div class="line number107 index106 alt2">
<code class="css plain">.column</code><code class="css value">2</code><code class="css plain">input[type=text] { </code>
</div>
<div class="line number108 index107 alt1">
<code class="css spaces"> </code><code class="css keyword">float</code><code class="css plain">:</code><code class="css value">right</code><code class="css plain">; </code>
</div>
<div class="line number109 index108 alt2">
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">110px</code><code class="css plain">; </code>
</div>
<div class="line number110 index109 alt1"><code class="css plain">}</code></div>
</div>
</td></tr>
</tbody>
</table>
</div>
</div>
<br>
<h3>[JavaScript]代码</h3>
<div>
<div id="highlighter_36735" class="syntaxhighlighter js ie">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr><td class="code">
<div class="container">
<div class="line number1 index0 alt2">
<code class="js keyword">var</code> <code class="js plain">canvas; </code>
</div>
<div class="line number2 index1 alt1">
<code class="js keyword">var</code> <code class="js plain">ctx; </code>
</div>
<div class="line number3 index2 alt2">
<code class="js spaces"> </code> </div>
<div class="line number4 index3 alt1">
<code class="js keyword">var</code> <code class="js plain">images = [ </code><code class="js comments">// predefined array of used images </code>
</div>
<div class="line number5 index4 alt2">
<code class="js spaces"> </code><code class="js string">'images/pic1.jpg'</code><code class="js plain">, </code>
</div>
<div class="line number6 index5 alt1">
<code class="js spaces"> </code><code class="js string">'images/pic2.jpg'</code><code class="js plain">, </code>
</div>
<div class="line number7 index6 alt2">
<code class="js spaces"> </code><code class="js string">'images/pic3.jpg'</code><code class="js plain">, </code>
</div>
<div class="line number8 index7 alt1">
<code class="js spaces"> </code><code class="js string">'images/pic4.jpg'</code><code class="js plain">, </code>
</div>
<div class="line number9 index8 alt2">
<code class="js spaces"> </code><code class="js string">'images/pic5.jpg'</code><code class="js plain">, </code>
</div>
<div class="line number10 index9 alt1">
<code class="js spaces"> </code><code class="js string">'images/pic6.jpg'</code><code class="js plain">, </code>
</div>
<div class="line number11 index10 alt2">
<code class="js spaces"> </code><code class="js string">'images/pic7.jpg'</code><code class="js plain">, </code>
</div>
<div class="line number12 index11 alt1">
<code class="js spaces"> </code><code class="js string">'images/pic8.jpg'</code><code class="js plain">, </code>
</div>
<div class="line number13 index12 alt2">
<code class="js spaces"> </code><code class="js string">'images/pic9.jpg'</code><code class="js plain">, </code>
</div>
<div class="line number14 index13 alt1">
<code class="js spaces"> </code><code class="js string">'images/pic10.jpg'</code>
</div>
<div class="line number15 index14 alt2"><code class="js plain">]; </code></div>
<div class="line number16 index15 alt1">
<code class="js keyword">var</code> <code class="js plain">iActiveImage = 0; </code>
</div>
<div class="line number17 index16 alt2">
<code class="js spaces"> </code> </div>
<div class="line number18 index17 alt1">
<code class="js plain">$(</code><code class="js keyword">function</code><code class="js plain">(){ </code>
</div>
<div class="line number19 index18 alt2">
<code class="js spaces"> </code> </div>
<div class="line number20 index19 alt1">
<code class="js spaces"> </code><code class="js comments">// drawing active image </code>
</div>
<div class="line number21 index20 alt2">
<code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">image = </code><code class="js keyword">new</code> <code class="js plain">Image(); </code>
</div>
<div class="line number22 index21 alt1">
<code class="js spaces"> </code><code class="js plain">image.onload = </code><code class="js keyword">function</code> <code class="js plain">() { </code>
</div>
<div class="line number23 index22 alt2">
<code class="js spaces"> </code><code class="js plain">ctx.drawImage(image, 0, 0, image.width, image.height); </code><code class="js comments">// draw the image on the canvas </code>
</div>
<div class="line number24 index23 alt1">
<code class="js spaces"> </code><code class="js plain">} </code>
</div>
<div class="line number25 index24 alt2">
<code class="js spaces"> </code><code class="js plain">image.src = images[iActiveImage]; </code>
</div>
<div class="line number26 index25 alt1">
<code class="js spaces"> </code> </div>
<div class="line number27 index26 alt2">
<code class="js spaces"> </code><code class="js comments">// creating canvas object </code>
</div>
<div class="line number28 index27 alt1">
<code class="js spaces"> </code><code class="js plain">canvas = document.getElementById(</code><code class="js string">'panel'</code><code class="js plain">); </code>
</div>
<div class="line number29 index28 alt2">
<code class="js spaces"> </code><code class="js plain">ctx = canvas.getContext(</code><code class="js string">'2d'</code><code class="js plain">); </code>
</div>
<div class="line number30 index29 alt1">
<code class="js spaces"> </code> </div>
<div class="line number31 index30 alt2">
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#panel'</code><code class="js plain">).mousemove(</code><code class="js keyword">function</code><code class="js plain">(e) { </code><code class="js comments">// mouse move handler </code>
</div>
<div class="line number32 index31 alt1">
<code class="js spaces"> </code><code class="js keyword">var</code><code class="js plain">canvasOffset = $(canvas).offset(); </code>
</div>
<div class="line number33 index32 alt2">
<code class="js spaces"> </code><code class="js keyword">var</code><code class="js plain">canvasX = Math.floor(e.pageX - canvasOffset.left); </code>
</div>
<div class="line number34 index33 alt1">
<code class="js spaces"> </code><code class="js keyword">var</code><code class="js plain">canvasY = Math.floor(e.pageY - canvasOffset.top); </code>
</div>
<div class="line number35 index34 alt2">
<code class="js spaces"> </code> </div>
<div class="line number36 index35 alt1">
<code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">imageData = ctx.getImageData(canvasX, canvasY, 1, 1); </code>
</div>
<div class="line number37 index36 alt2">
<code class="js spaces"> </code><code class="js keyword">var</code><code class="js plain">pixel = imageData.data; </code>
</div>
<div class="line number38 index37 alt1">
<code class="js spaces"> </code> </div>
<div class="line number39 index38 alt2">
<code class="js spaces"> </code><code class="js keyword">var</code><code class="js plain">pixelColor = </code><code class="js string">"rgba("</code><code class="js plain"> pixel[0] </code><code class="js string">", "</code> <code class="js plain"> pixel[1] </code><code class="js string">", "</code><code class="js plain"> pixel[2] </code><code class="js string">", "</code><code class="js plain"> pixel[3] </code><code class="js string">")"</code><code class="js plain">; </code>
</div>
<div class="line number40 index39 alt1">
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#preview'</code><code class="js plain">).css(</code><code class="js string">'backgroundColor'</code><code class="js plain">, pixelColor); </code>
</div>
<div class="line number41 index40 alt2">
<code class="js spaces"> </code><code class="js plain">}); </code>
</div>
<div class="line number42 index41 alt1">
<code class="js spaces"> </code> </div>
<div class="line number43 index42 alt2">
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#panel'</code><code class="js plain">).click(</code><code class="js keyword">function</code><code class="js plain">(e) { </code><code class="js comments">// mouse click handler </code>
</div>
<div class="line number44 index43 alt1">
<code class="js spaces"> </code><code class="js keyword">var</code><code class="js plain">canvasOffset = $(canvas).offset(); </code>
</div>
<div class="line number45 index44 alt2">
<code class="js spaces"> </code><code class="js keyword">var</code><code class="js plain">canvasX = Math.floor(e.pageX - canvasOffset.left); </code>
</div>
<div class="line number46 index45 alt1">
<code class="js spaces"> </code><code class="js keyword">var</code><code class="js plain">canvasY = Math.floor(e.pageY - canvasOffset.top); </code>
</div>
<div class="line number47 index46 alt2">
<code class="js spaces"> </code> </div> <div class="line number48 index47 alt1">
<code class="js spaces"> </code><code class="js keyword">var</code><code class="js plain">imageData = ctx.getImageData(canvasX, canvasY, 1, 1); </code>
</div>
<div class="line number49 index48 alt2">
<code class="js spaces"> </code><code class="js keyword">var</code><code class="js plain">pixel = imageData.data; </code>
</div>
<div class="line number50 index49 alt1">
<code class="js spaces"> </code> </div>
<div class="line number51 index50 alt2">
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#rVal'</code><code class="js plain">).val(pixel[0]); </code>
</div>
<div class="line number52 index51 alt1">
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#gVal'</code><code class="js plain">).val(pixel[1]); </code>
</div>
<div class="line number53 index52 alt2">
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#bVal'</code><code class="js plain">).val(pixel[2]); </code>
</div>
<div class="line number54 index53 alt1">
<code class="js spaces"> </code> </div>
<div class="line number55 index54 alt2">
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#rgbVal'</code><code class="js plain">).val(pixel[0] </code><code class="js string">','</code><code class="js plain"> pixel[1] </code><code class="js string">','</code><code class="js plain"> pixel[2]); </code>
</div>
<div class="line number56 index55 alt1">
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#rgbaVal'</code><code class="js plain">).val(pixel[0] </code><code class="js string">','</code><code class="js plain"> pixel[1] </code><code class="js string">','</code><code class="js plain"> pixel[2] </code><code class="js string">','</code><code class="js plain"> pixel[3]); </code>
</div>
<div class="line number57 index56 alt2">
<code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">dColor = pixel[2] 256 * pixel[1] 65536 * pixel[0]; </code>
</div>
<div class="line number58 index57 alt1">
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#hexVal'</code><code class="js plain">).val( </code><code class="js string">'#'</code> <code class="js plain"> dColor.toString(16) ); </code>
</div>
<div class="line number59 index58 alt2">
<code class="js spaces"> </code><code class="js plain">}); </code>
</div>
<div class="line number60 index59 alt1">
<code class="js spaces"> </code> </div>
<div class="line number61 index60 alt2">
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#swImage'</code><code class="js plain">).click(</code><code class="js keyword">function</code><code class="js plain">(e) { </code><code class="js comments">// switching images </code>
</div>
<div class="line number62 index61 alt1">
<code class="js spaces"> </code><code class="js plain">iActiveImage ; </code>
</div>
<div class="line number63 index62 alt2">
<code class="js spaces"> </code><code class="js keyword">if</code> <code class="js plain">(iActiveImage >= 10) iActiveImage = 0; </code>
</div>
<div class="line number64 index63 alt1">
<code class="js spaces"> </code><code class="js plain">image.src = images[iActiveImage]; </code>
</div>
<div class="line number65 index64 alt2">
<code class="js spaces"> </code><code class="js plain">}); </code>
</div>
<div class="line number66 index65 alt1"><code class="js plain">});</code></div>
</div>
</td></tr>
</tbody>
</table>
</div>
</div>
<br><br>本文由<a href="http://www.html5cn.org/">HTM5L中国</a>网站小编整理转发，转载请注明出处。<br>
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn