Canvas入門（2）:圖形漸層和映像形變換，canvas漸層

Canvas入門（2）:圖形漸層和映像形變換，canvas漸層

來源：http://www.ido321.com/986.html

一、圖形漸層（均在最新版Google中測試）

1、繪製線性漸層

   1: // 擷取canvas 的ID

   2:     var canvas = document.getElementById('canvas');

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 擷取上下文

   8:     var context = canvas.getContext('2d');

   9:     // 擷取漸層對象

  10:     var g1 = context.createLinearGradient(0,0,0,300);

  11:     // 添加漸層顏色

  12:     g1.addColorStop(0,'rgb(255,255,0)');

  13:     g1.addColorStop(1,'rgb(0,255,255)');

  14:     context.fillStyle = g1;

  15:     context.fillRect(0,0,400,300);

  16:     var g2 = context.createLinearGradient(0,0,300,0);

  17:     g2.addColorStop(0,'rgba(0,0,255,0.5)');

  18:     g2.addColorStop(1,'rgba(255,0,0,0.5)');

  19:     for(var i = 0; i<10;i++)

  20:     {

  21:         context.beginPath();

  22:         context.fillStyle=g2;

  23:         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);

  24:         context.closePath();

  25:         context.fill();

  26:     }

createLinearGradient(x1,y1,x2,y2):參數分別表示漸層起始位置和結束位置的橫縱座標

addColorStop(offset,color):offset表示設定的顏色離漸層起始位置的位移量，取值範圍是0~1的浮點值。漸層起始位移量是0，漸層結束位移量是1.color是漸層的顏色。

效果：

2、繪製放射狀漸層

   1: // 擷取canvas 的ID

   2:     var canvas = document.getElementById('canvas');

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 擷取上下文

   8:     var context = canvas.getContext('2d');

   9:     // 擷取漸層對象

  10:     var g1 = context.createRadialGradient(400,0,0,400,0,400);

  11:     // 添加漸層顏色

  12:     g1.addColorStop(0.1,'rgb(255,255,0)');

  13:     g1.addColorStop(0.3,'rgb(255,0,255)');

  14:     g1.addColorStop(1,'rgb(0,255,255)');

  15:     context.fillStyle = g1;

  16:     context.fillRect(0,0,400,300);

  17:     var g2 = context.createRadialGradient(250,250,0,250,250,300);

  18:     g2.addColorStop(1,'rgba(0,0,255,0.5)');

  19:     g2.addColorStop(0.7,'rgba(255,255,0,0.5)')

  20:     g2.addColorStop(0.1,'rgba(255,0,0,0.5)');

  21:     for(var i = 0; i<10;i++)

  22:     {

  23:         context.beginPath();

  24:         context.fillStyle=g2;

  25:         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);

  26:         context.closePath();

  27:         context.fill();

  28:     }

createRadialGradient(x1,y1,radius1,x2,y2,radius2):x1,y1,radius1分別是漸層開始圓的圓心橫縱座標和半徑。x2,y2,radius2分別是漸層結束圓的圓心橫縱座標和半徑。

效果

二、圖形變換

1、座標變換：平移、縮放和旋轉

   1: // 擷取canvas 的ID

   2:     var canvas = document.getElementById('canvas');

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 擷取上下文

   8:     var context = canvas.getContext('2d');

   9:     context.fillStyle = '#eeeeff';

  10:     context.fillRect(0,0,400,300);

  11:     // 平移座標原點

  12:     context.translate(200,50);

  13:     context.fillStyle = 'rgba(255,0,0,0.25)';

  14:     for(var i = 0; i<50;i++)

  15:     {

  16:         context.translate(25,25);

  17:         // 圖形縮放

  18:         context.scale(0.95,0.95);

  19:         // 圖形旋轉

  20:         context.rotate(Math.PI / 10);

  21:         context.fillRect(0,0,100,50);

  22:     }

translate(x,y):平移原點，x,y表示向左和向下移動多少單位，預設單位是像素

scale(x,y):縮放，x,y表示水平和垂直方向的縮放大小。小於1縮小，大於1放大。

rotate(angle)：旋轉，angle是旋轉角度，單位是弧度。大於0表示順時針旋轉，反之逆時針。

效果：

2、矩陣變換

   1: // 擷取canvas 的ID

   2:     var canvas = document.getElementById('canvas');

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 擷取上下文

   8:     var context = canvas.getContext('2d');

   9:     // 定義顏色

  10:     var colors = ['red','orange','yellow','green','blue','navy','purple'];

  11:     // 定義線寬

  12:     context.lineWidth = 10;

  13:     // 矩陣變換

  14:     context.transform(1,0,0,1,100,0);

  15:     // 迴圈繪製圓弧

  16:     for (var i = 0; i < colors.length; i++)

17: { //原點每次下移10個px

  18:          context.transform(1,0,0,1,0,10);

  19:         context.strokeStyle = colors[i];

  20:         context.beginPath();

  21:         context.arc(50,100,100,0,Math.PI,true);

  22:         context.stroke();

  23:     }

transform(m11,m12,m21,m22,dx,dy):改方法使用一個新的變換矩陣與當前變換矩陣進行乘法運算。dx,dy表示原點座標左移和下移的單位，預設是像素。

該變換矩陣格式如下

m11     m12   dx

m21      m22  dy

0            0         1

最終效果：

總結:座標變換的方法均可以用transform()代替，規則如下：

1、translate(x,y)  <=>  transform(1,0,0,1,dx,dy)或transform(0,1,1,0,dx,dy)，前四個參數表示不對圖形進行縮放操作。

2、scale(x,y) <=> transform(x,0,0,y,0,0)或transform(0,y,x,0,0,0),後面兩個參數表示不進行平移。

3、rotate(angle) <=> transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),0,0)或

transform(-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),0,0)

下一篇：Canvas入門（3）:影像處理和繪製文字

您好，教您一個html5 canvas的問題： 我在canvas中畫了多個圖形，有映像（image）、直線

canvas可以實現
首先canvas要響應滑鼠事件（onmousedown之類）
之後所有的圖形必須要建立相應的對象，來記錄他們所在的位置以及大小還有zOrder（層疊位置，在2個對象重疊的時候決定誰在上面），相應的對象放到一個數組裡並按zOrder排序
當canvas的滑鼠click事件觸發後，按照zOrder的順序來檢測滑鼠座標在不在某個對象的地區裡，如果在，則執行相應的函數
 
ps怎把映像裡的一塊不規則圖形進行漸層色處理？

用多邊形套索工具將不規則圖形作為選區選擇起來，然後用漸層工具漸層填充就可以了