HTML5 : canvas

admin

1. <canvas id="myCanvas" width="300" height="300" style="border:1px solid #00F;"></canvas>
   
2. 
   
3. <script type="text/javascript">
   
4. var myCanvas = document.getElementById("myCanvas").getContext("2d");
   
5. myCanvas.fillStyle = "#F00";
   
6. myCanvas.fillRect(90, 20, 130, 130);
   
7. </script>

複製代碼

畫一個長方形

admin

置入一張圖片

1. <canvas id="myCanvas" width="640" height="640" style="border:1px solid #000000;"></canvas>
   
2. 
   
3. <script type="text/javascript">
   
4. var myCanvas = document.getElementById("myCanvas");
   
5. var myCVS = myCanvas.getContext("2d");
   
6. 
   
7. var Pic = new Image();
   
8. Pic.src = "images/tao-redd.jpg";
   
9. 
   
10. Pic.onload = function () {
    
11. myCVS.drawImage(Pic, 0, 0, 640, 640);
    
12. }
    
13. </script>

複製代碼