2019.1.21 canvas学习小计

OnlyLing 发布于2019-08-02 14:09 / 1091人阅读

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) ) / 2

4.分解

最大分解：

Gray = Max(Red, Green, Blue)
最小分解：

Gray = Min(Red, Green, Blue)

。。。。
灰度算法

GPU云服务器云服务器小计 webrtc音视频小计 Canvas _canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53603.html

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 makePixe...

MangoGoing 2019-08-30 15:55 评论0 收藏0
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 makePixe...

biaoxiaoduan 2019-08-23 14:52 评论0 收藏0
12.16前端无障碍学习小计

摘要：屏幕阅读器的两种方式读角色名轻松识别的声音一般，如果配置正确，屏幕阅读器一般会有，，，控件的文字绑定放入标签或标签加入目标绑定目标交互控件的属性是图片的替代文本将图片不需要的代替文本设置为空，将会从无障碍树移除，从而跳过在合适的情况下，应该屏幕阅读器的两种方式：1.读角色名；2.轻松识别的声音一般，如果配置正确，屏幕阅读器一般会有Role，Name（lable），State，Val...

Kerr1Gan 2019-08-02 16:07 评论0 收藏0
2018.12.24 无障碍学习小计

摘要：在中的规范，包括关于角色可以使用哪些元素和不使用哪些元素的指导英不启用将网页某个部分标记为，以便及时向用户显示更新内容，而不是用户浏览这部分网站时更新可能位于初始页面加载中不同的屏幕阅读器和辅助技术对不同更改的响应不同，如果辅助技术不 ARIA 在 HTML 中的规范，包括关于 ARIA 角色可以使用哪些 HTML 元素和不使用哪些 HTML 元素的指导 https://www.w3....

Fundebug 2019-08-30 15:55 评论0 收藏0
2018.12.23 无障碍学习小计

摘要：指示元素展开或者折叠从无障碍树移除元素及其子项，和引用的元素除外将一些元素隐藏，可做如下的设置，也可以将为屏幕阅读器用户呈现的内容放在屏幕之外，引用隐藏的元素，添加对辅助技术用户隐藏，隐藏的元素将不会出现在树元素作当前元素的子 aria-expanded：指示元素展开或者折叠 aria-hidden：从无障碍树移除元素及其子项，aria-labeledby和aria-described...

Anleb 2019-08-30 15:54 评论0 收藏0