2019.1.21 canvas学习小计

var c = document.querySelector(’#drawing’);var ctx = c.getContext(“2d”);var image = new Image();image.onload = function() { ctx.drawImage(image, 0, 0);}image.src = “images/palette.jpg”;var makePixelGrayScale = function (r, g, b, a) { var y = (0.3 * r) + （0.59 * g） + (0.11 * b); return {r:y, g:y, b:y, a:y};}//灰度算法function makeGrayScale() { var r, g, b, a; var imageData = ctx.getImageData(0, 0, 300, 300); var numPixels = imageData.data.length/4; for (var i = 0; i < numPixels; i++) { r = imageData.data[i * 4 + 0]; g = imageData.data[i * 4 + 1]; b = imageData.data[i * 4 + 2]; a = imageData.data[i * 4 + 3]; pixel = makePixelGrayScale(r, g, b, a); imageData.data[i * 4 + 0] = pixel.r; imageData.data[i * 4 + 1] = pixel.g; imageData.data[i * 4 + 2] = pixel.b; imageData.data[i * 4 + 3] = pixel.a; } ctx.putImageDate(imageData,0 , 0);}灰度算法1.平均For Each Pixel in Image { Red = Pixel.Red Green = Pixel.Green Blue = Pixel.Blue Gray = (Red + Green + Blue) / 3 Pixel.Red = Gray Pixel.Green = Gray Pixel.Blue = Gray}2.亮度Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)3.去饱和Gray = ( Max(Red, Green, Blue) + Min(Red, Green, Blue) ) / 24.分解最大分解：Gray = Max(Red, Green, Blue)最小分解：Gray = Min(Red, Green, Blue)。。。。灰度算法