DIV CSS 佈局教程網

翻轉、移動、平移、放大、縮小

1. var canvas = document.getElementById('canvas');   
2. if (canvas.getContext) {   
3.     var context = canvas.getContext('2d');   
4.     // 放大與縮小   
5.     context.beginPath();   
6.     context.strokeStyle = "#000000";   
7.     context.strokeRect(10,10,150,100);   
8.         
9.     // 放大3倍   
10.     context.scale(3,3);   
11.     context.beginPath();   
12.     context.strokeStyle = '#cccccc';   
13.     context.strokeRect(10,10,150,100)   
14.         
15.     // 縮小   
16.     context.scale(0.5,0.5);   
17.     context.beginPath();   
18.     context.strokeStyle = '#cccccc';   
19.     context.strokeRect(10,10,150,100)   
20.         
21.      // 翻轉   
22.     var img = new Image();   
23.     img.src = 'images/1.jpg';   
24.     img.onload = function(){   
25.         context.drawImage(img, 10,10);           
26.         context.scale(1, -1);   
27.         context.drawImage(img, 0, -500);   
28.     }   
29.     // 平移   
30.     context.beginPath();   
31.     context.strokeStyle = '#000000';   
32.     context.strokeRect(10,101,150,100);   
33.     // x移動 50  y 移動100   
34.     context.translate(50,100);   
35.     context.beginPath();   
36.     context.strokeStyle = '#cccccc';   
37.     context.strokeRect(10,10,150,100);   
38.     // 旋轉   
39.     context.beginPath();   
40.     context.strokeStyle = '#000000';   
41.     context.strokeRect(200,50,100,50);   
42.     // 默認旋轉是根據0,0中心，使用translate可以按照自己的設置的中心旋轉   
43.     context.translate(250,75);   
44.        
45.     context.rotate(45 * Math.PI /180);   
46.     context.translate(-250, -75);   
47.   
48.     context.beginPath();   
49.     context.strokeStyle = '#cccccc';   
50.     context.strokeRect(200,50,100,50);   
51.         
52.     // transform 矩陣   
53.     context.beginPath();   
54.     context.strokeStyle = '#000000';   
55.     context.strokeRect(10,10,150,100);   
56.        
57.     context.transform(3,0,0,3,0,0);   
58.     context.beginPath();   
59.     context.strokeStyle = '#cccccc';   
60.     context.strokeRect(10,10,150,100);   
61.         
62. }  

漸變、圖像組合效果、顏色翻轉

1. var canvas = document.getElementById('canvas');   
2. if (canvas.getContext) {   
3.     var context = canvas.getContext('2d');   
4.     // 線性繪制漸變   
5.     var grd = context.createLinearGradIEnt(0,0,200,100);   
6.     // postion 必須是0.1-1.0之間的豎直，表示漸變中顏色的地點相對地位，color表示顏色   
7.     grd.addColorStop(0.1, "#00ff00");   
8.     grd.addColorStop(0.8, "#ff0000");   
9.        
10.     context.fillStyle = grd;   
11.     context.fillRect(0,0, 200,100);   
12.     // 徑向漸變   
13.     var grd = context.createRadialGradIEnt(100,100,10,100,100,50);   
14.     grd.addColorStop(0.1, "#00ff00");   
15.     grd.addColorStop(0.8, '#ff0000');   
16.     context.fillStyle = grd;   
17.     context.fillRect(0,0,200,200);   
18.     // 圖像組合效果   
19.      context.fillStyle = '#00ff00';   
20.      context.fillRect(10,10,50,50);   
21.      // 新繪圖   
22.      //context.globalCompositeOperation  = "source-over";   
23.      // 只繪制新內容，刪除其他所有內容   
24.      context.globalCompositeOperation = 'copy';   
25.      // 圖形重疊的地方，其顏色值相減後決定   
26.      context.globalCompositeOperation = 'darker';   
27.      // 畫布上已經有的內容只會載和其他圖形重疊的地方保留   
28.      context.globalCompositeOperation = 'destination-atop';   
29.      // 參考 http://www.w3school.com.cn/Htmldom/prop_canvasrenderingcontext2d_globalcompositeOperation.ASP   
30.      context.beginPath();   
31.      context.fillStyle = '#ff0000';   
32.      context.arc(50,50,30,0, 2 * Math.PI);   
33.      context.fill();   
34.         
35.      // 顏色翻轉   
36.      var img = new Image();   
37.           
38.      img.src = 'images/1.jpg';   
39.      img.onload = function(){   
40.          context.drawImage(img, 0,0, 1, 1);   
41.          var imgData = context.getImageData(0,0, 1,1);   
42.          var pixels = imgData.data;   
43.          console.log(pixels);   
44.          for(var i = 0, n = pixels.length; i < n; i+=4) {   
45.              pixels[i] = 255 - pixels[i];   
46.              pixels[i+1] = 255 - pixels[i + 1];   
47.              pixels[i+2] = 255 - pixels[i + 2];   
48.          }   
49.          context.putImageData(imgData, 250, 0);   
50.      }   
51. }