DIV CSS 佈局教程網

這節課主要給大家展示兩個實例，當然，都是灰常簡單的。

首先是第一個效果，顏色選擇器，這個效果如下

我想大家，很多人都做過其他版本的這個東東吧，對了，這次就是要在Html5裡面簡單的實現一下

首先要做的就是准備工作了

XML/Html Code復制內容到剪貼板

1. <canvas id="text" width="100" height="100"></canvas>  
2.       <p>Red：   <input type="range"   id="red" min="0" max="255" value="0" onchange="fill();"/></p>  
3.       <p>Green：<input type="range"  id="green" min="0" max="255"  value="0" onchange="fill();"/></p>  
4.       <p>Blue：  <input type="range"   id="blue" min="0" max="255"  value="0" onchange="fill();"/></p>  
5.       目前的顏色:<span id="showcolor"></span>  

這回我們使用  range 這個 滑動條然後實現想要的效果。

JavaScript Code復制內容到剪貼板

1. <script type="text/Javascript">  
2.           var c = document.getElementById("text");  
3.           var ctx = c.getContext("2d");  
4.           var red = document.getElementById("red");  
5.           var green = document.getElementById("green");  
6.           var blue = document.getElementById("blue");  
7.           function fill() {  
8.               ctx.fillStyle = "rgb(" + red.value + "," + green.value + "," + blue.value + ")";  
9.               document.getElementById("showcolor").innerHtml = ctx.fillStyle;  
10.               ctx.fillRect(0, 0, 100, 100);  
11.           }  
12.       </script>  

看到代碼了嗎？哈哈，十分簡單吧，一看就明白了，(*^__^*) 嘻嘻……

第二個例子是，彩帶效果，這個就是一個隨機顯示顏色的效果。呵呵，大家注意這些以後可能我們還會用到的哦。

JavaScript Code復制內容到剪貼板

1. <canvas id="text" width="400" height="400">不支持此標簽</canvas>  
2.       <input type="button" value="開始運行"  onclick="setInterval(move,1);"/>  
3.       <script type="text/Javascript">  
4.           var c = document.getElementById("text");  
5.           var ctx = c.getContext("2d");  
6.   
7.           var width = parseInt(c.getAttribute("width"));  
8.           var height = parseInt(c.getAttribute("height"));  
9.           var imageData = ctx.createImageData(width, height);  
10.   
11.           function move() {  
12.               var x = 200;  
13.               for (var y = 0; y < height; y++) {  
14.                   ctx.fillStyle = ("rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")");  
15.                   ctx.fillRect(x, y, 50, 50);  
16.               };  
17.           }  
18.       </script>  

這兩個例子難度都不大，主要就是對大家的熟悉程度的一個小小的測試，以後的課程我會慢慢的給大家做出一些很有意思的效果的。今天的簡單課程到此結束