如何使用漸變貼圖在畫布中調整帶有圖像的HTML5畫布。

Question

我目前有一個字符串，就像下面顯示的字符串一樣，我想用一個圖像來表示圖像。我在2周的時間裏搜索了16小時的Google訪問，試圖找出答案。我可以將圖像加載到畫布上。

這就是我期待的。這是GIMP的例子（一個Adobe公司的Photoshop類似程序，它是開源的）：http://gimpguru.org/tutorials/sampletoning/

0,0,0 0,0,0 0,0,2 0,0,20 0,0,38 0,0,50 0,0,35 0,0,53 0,0,35 0,2,33 0,0,64 0,2,58 0,4,66 0,6,64 0,7,63 0,10,61 0,13,64 0,16,57 0,16,67 0,17,73 0,20,73 0,21,75 0,23,75 0,22,79 0,28,76 0,28,74 0,28,89 0,33,84 0,33,89 0,35,85 0,37,92 0,39,89 0,39,92 0,44,91 0,45,92 12,38,94 0,45,104 4,46,97 18,40,98 6,48,99 17,47,93 7,52,98 9,54,94 13,51,111 7,57,111 10,58,109 15,58,110 16,59,111 13,64,105 16,64,109 16,64,118 17,66,113 22,65,118 23,66,119 17,72,120 27,72,110 28,73,110 23,76,113 30,75,112 37,76,99 29,77,122 37,77,115 38,76,128 45,81,97 33,84,121 38,83,124 33,85,134 44,87,112 47,87,113 66,79,120 45,90,129 47,92,121 47,92,129 45,93,140 50,95,125 52,95,130 51,98,126 52,97,137 51,100,136 57,98,142 72,99,111 65,103,125 52,107,142 76,103,117 72,106,123 68,106,137 74,106,137 70,110,130 66,110,149 72,113,130 72,112,147 74,114,138 77,115,136 82,114,138 79,117,143 76,120,144 82,119,141 92,117,141 85,121,142 79,123,157 89,124,138 92,122,153 84,126,157 119,120,111 89,129,150 94,128,151 95,130,144 100,129,146 89,135,159 98,133,152 104,135,143 105,136,144 112,134,141 110,136,147 109,138,148 112,139,144 106,140,166 118,139,149 112,142,155 129,140,132 133,139,137 111,147,162 115,147,163 129,144,148 114,149,173 120,150,161 132,149,149 133,149,154 138,150,146 133,152,156 141,153,138 135,154,156 142,152,157 133,155,173 136,156,170 139,158,155 146,157,154 143,159,159 138,163,163 124,166,189 150,162,157 143,161,186 152,164,164 138,169,179 158,165,155 157,167,157 159,167,159 150,170,179 159,169,164 156,171,171 147,177,177 168,171,157 157,173,181 164,172,180 162,179,161 171,174,164 163,178,182 170,179,168 162,181,182 164,180,189 177,180,166 178,182,161 171,182,186 180,184,162 179,184,172 188,183,157 184,185,168 181,188,170 188,188,163 186,188,169 183,193,170 192,188,172 195,191,167 200,188,164 185,194,193 193,195,174 189,195,188 197,195,179 200,196,172 199,196,182 202,197,179 204,197,176 203,200,174 194,202,197 202,202,183 209,201,180 209,202,180 209,202,193 210,203,188 210,206,187 211,206,191 196,209,223 202,212,199 215,208,192 213,210,193 209,213,199 215,213,194 222,212,186 222,213,188 219,215,195 221,215,197 221,217,195 224,216,196 216,221,200 222,218,209 223,221,198 227,217,215 217,226,203 227,223,204 228,222,215 231,224,202 222,228,212 221,227,230 227,231,201 228,231,200 226,232,212 229,231,219 225,231,233 237,231,214 236,232,215 223,237,237 213,238,255 226,242,222 228,238,240 249,233,214 227,242,239 241,240,222 229,244,236 237,242,236 231,244,246 226,246,255 242,242,246 234,249,236 241,244,255 230,252,248 252,246,230 226,254,255 248,249,237 247,249,245 241,253,254 238,255,255 236,255,255 243,255,255 239,255,255 239,255,255 240,255,255 240,255,255 241,255,255 255,255,255 247,255,255 255,255,255 252,255,255 255,255,255 255,255,255 255,255,255 255,255,255 

Answer 1

問得好！這不是那種直接顯而易見的事情。但是，如果您瞭解如何製作灰度圖像，它其實很簡單。

所以讓我們做的第一：

function grayscale() { 
    var can = document.getElementById('canvas1'); 
    var ctx = can.getContext('2d'); 

    var imageData = ctx.getImageData(0,0,can.width, can.height); 
    var pixels = imageData.data; 
    var numPixels = pixels.length; 

    ctx.clearRect(0, 0, can.width, can.height); 

    for (var i = 0; i < numPixels; i++) { 
     var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3; 
     // set red green and blue pixels to the average value 
     pixels[i*4] = average; 
     pixels[i*4+1] = average; 
     pixels[i*4+2] = average; 
    } 
    ctx.putImageData(imageData, 0, 0); 
} 

這是什麼東西做的是每個像素的紅色，綠色和藍色的平均顏色，並設置R，G和B以相同的平均數。如果RGB值全部相同，則該像素將爲灰色（或黑色或白色）。

但是你想要着色它，想到的不僅僅是灰色像素。那麼它不難從這裏。你看那些三行：

 pixels[i*4] = average; 
     pixels[i*4+1] = average; 
     pixels[i*4+2] = average; 

他們做的東西，如：

 pixels[i*4] = average; 
     pixels[i*4+1] = average + 30; 
     pixels[i*4+2] = average; 

綠色像素設定爲 「高於平均水平」。現在將是綠色。

來吧，給一個嘗試：

http://jsfiddle.net/3eUBk/2/