如何在画布中使用渐变贴图来绘制HTML5画布。 [英] How can I use a gradient map to tone a HTML5 canvas with an image in the canvas.
本文介绍了如何在画布中使用渐变贴图来绘制HTML5画布。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我想要做的。这是一个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,6 6 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,1 10130 66110149 72113130 72112147 74114138 77115136 82114138 79117143 76120144 82119141 92117141 85121142 79123157 89124138 92122153 84126157 119120111 89129150 94128151 95130144 100129146 89135159 98133152 104135143 105136144 112134141 110136147 109138148 112139144 106140166 118139149 112142155 129140132 133139137 111147162 115147163 129144148 114149173 120150161 132149149 133149154 138150146 133152156 141153138 135154156 142152157 133155173 136156170 139158155 146157154 143159159 138163163 124166189 150162157 143161186 152164164 138169179 158165155 157167157 159167159 150170179 159169164 156171171 147177177 168171157 157173181 164172180 162179161 171174164 163178182 170179168 162181182 164180189 177180166 178182161 171182186 180184162 179184172 188183157 184185168 181188170 188188163 186188169 183193170 192188172 195,1 91167 200188164 185194193 193195174 189195188 197195179 200196172 199196182 202197179 204197176 203200174 194202197 202202183 209201180 209202180 209202193 210203188 210206187 211206191 196209223 202212199 215208192 213210193 209213199 215213194 222212186 222213188 219215195 221215197 221217195 224216196 216221200 222218209 223221198 227217215 217226203 227223204 228222215 231224202 222228212 221227230 227231201 228231200 226232212 229231219 225231233 237231214 236232215 223237237 213238255 226242222 228238240 249233214 227242239 241240222 229244236 237242236 231244246 226246255 242242246 234249236 241244255 230252248 252246230 226254255 248249237 247249245 241253254 238255255 236255255 243255255 239255255 239255255 240255255 240255255 241255255 255255255 247255255 255255255 252255255 255255255 255255255 255255255 255,255,2 55
解决方案
好问题！这不是立即明显的那种事情。但是实际上很简单，只要你了解如何制作灰度图像。
所以让我们先做一下：
function greescale（）{
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）;对于（var i = 0; i< numPixels; i ++）{
var average =（pixels [i * 4] + pixel [i * 4 + 1] + pixels [i * 4 + 2]）/ 3;
//将红色绿色和蓝色像素设置为平均值
像素[i * 4] =平均值;
像素[i * 4 + 1] =平均;
像素[i * 4 + 2] =平均;
}
ctx.putImageData（imageData，0，0）;
}
这样做是将每个像素的红，绿，和蓝色，并将R，G和B设置为相同的平均数。如果RGB值全部相同，则该像素将为灰色（或黑色或白色）。
但是，您想要着色，想像不仅仅是使像素灰色。那么它不难从这里。你看到这三行：
pixels [i * 4] = average;
像素[i * 4 + 1] =平均;
像素[i * 4 + 2] =平均;
让他们像：
pixels [i * 4] = average;
像素[i * 4 + 1] =平均值+ 30;
像素[i * 4 + 2] =平均;
绿色像素是高于平均水平。现在将要着色绿色。
继续尝试：
I currently have a string, like the one displayed below, that I would like to tone an image with. I have searched Google in-access of 16 hours over the period of 2 weeks trying to figure out an answer. I can load an image into the canvas.
This is what I am looking to do. This is a GIMP example (an Adobe Photoshop like program that is open source): 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
解决方案
Good question! This isn't the kind of thing that's immediately obvious. But it is actually very simple provided you understand how to make grayscale images.
So lets do that first:
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);
}
What this is doing is taking the average color of each pixel's Red, Green, and Blue, and setting the R, G, and B to that same average number. If the RGB values are all identical, that pixel will be gray (or black or white).
But you want to tint it, thought, not just make the pixels gray. Well its not hard from here. You see those three lines:
pixels[i*4] = average;
pixels[i*4+1] = average;
pixels[i*4+2] = average;
Make them to something like:
pixels[i*4] = average;
pixels[i*4+1] = average + 30;
pixels[i*4+2] = average;
The green pixel is "above average". It is now going to be tinted green.
Go ahead and give that a try:
这篇关于如何在画布中使用渐变贴图来绘制HTML5画布。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
