闲聊js10: 创建一个演示用的渲染库8(颜色和像素操作)

本篇的目的是要了解:

  1. 渐变填充
  2. alpha blend
  3. 图像合成
  4. 了解源和目标概念

1. 封装渐变填充方法:

在前几篇中我们使用了颜色/Pattern进行矢量图形的填充,今天我们来继续最后一种方式的填充:渐变色。封装代码如下:

      createGradient(params, colors = [{ weight: 0, color: 'red' }, { weight: 1, color: 'blue' }]) {
        //坐标参数params必须要有内容
        if (params == null)
            return null;

        let g = null;
        let len = params.length;

        //坐标参数个数为0,退出
        if (len == 0)
            return null;

        //坐标参数params必须是4个或6个
        if (len != 4 && len != 6)
            return null;

        let ctx = this.context;

        if (len == 4) {
            //线性
            g = ctx.createLinearGradient(params[0], params[1], params[2], params[3]);
        } else {
            //放射性
            g = ctx.createRadialGradient(params[0], params[1], params[2], params[3], params[4], params[5]);
        }

        //渐变色不仅仅是2个,还可以多个
        //但是有一个条件:必须weight之和为1.0
        for (let i = 0; i < colors.length; i++) {
            g.addColorStop(colors[i].weight, colors[i].color);
        }

        return g;
    }

渐变色的要点提示:

  • canvas2d的addColorStop第一个是权重参数,渐变色的权重之和必须为1.0,具体见下面放射性渐变色测试代码.
  • 渐变色使用的填充坐标系是基于全局坐标系表示

测试代码:

//渐变色,3种颜色,权重为1.0
        let colors = [{
            weight: 0.1,
            color: "blue"
        }, {
            weight: 0.2,
            color: 'green'
        }, {
            weight: 0.7,
            color: 'red'
        }];
//矩形渐变绘制
//渐变色的坐标定义是矩形中心线
let coords = [550, 225, 750, 225]; //线性 4个参数[x0,y0,x1,y1] 组成一条直线
let g = render.createGradient(coords);
render.drawRect(new Rect(550, 200, 200, 50), g);
//放射性渐变圆绘制

 coords = [650, 400, 30, 650, 400, 100]; ///放射性 6 个参数[x0,y0,r0,x1,y1,r1]组成内圆和外圆
g = render.createGradient(coords /*, colors*/ );
render.drawCircle(new Circle(650, 400, 100), g);
渐变效果.png

2. alpha blend:

  • 全局alpha blend : canvas2d.globalAlpha进行设置。一旦设定,浏览器会将绘制的图像(图形最后光栅化为图像)每个像素的alpha值与globalAlpha进行相乘,影响全局。除非必要,尽量不要使用globalAlpha。alpha取值范围[0,1]

  • 局部alpha blend: style中规定的颜色的alpha值,仅影响当前绘制像素。尽量使用该方式。

image.onload = function(e) {
            let pattern = render.createPattern(image);

            if (pattern) {
                render.drawCircle(new Circle(200, 200, 100), pattern);
                //这里增加一个alpha blend测试,将圆图上蒙上一个红色,alpha为0.5的蒙版
                render.drawCircle(new Circle(200, 200, 100), "rgba(255,0,0,0.5)");
                render.drawArc(new Arc(420, 200, 100, 30, 180), pattern);
            }
        }
alphablend.png

css颜色表示这篇文档好好读并体会一下:

提示:

  • 16进制表示时,没有alpha分量(#FF00FF,仅仅规定了RGB)

  • rgba(255,127,128,0.5)表示时,alpha[0-1]之间,RGB各个分量取值[0-255]

  • hsla(120,65%,75%,0.3)表示时,h[0-360],s和l以%百分比表示,alpha[0,1]

3.封装图像合成操作:

关于图像合成操作,目前用的不多,以后在webgl中,我们在GPU fragment shader编程时候,会聊很多图像方面的东西。

对于我们的渲染器来说,将图像合成操作功能添加到各个draw函数中去吧:

 drawRect(rc, style = "red", isFill = true, compsiteOp = '') {

        let ctx = this.context;

        ctx.save();
        
        //compsiteOp参数 default为空字符串
        //如果非空,则设置为全局合成操作
        //规范点的话,还要进行参数值字符串正确性判断
        //这里就简化不做检测了
        if (compsiteOp != null && compsiteOp.length != 0)
            ctx.globalCompositeOperation = compsiteOp;

        ctx.beginPath();

        if (isFill) {
            ctx.fillStyle = style;
            ctx.fillRect(rc.x, rc.y, rc.width, rc.height);
        } else {
            ctx.strokeStyle = style;
            ctx.strokeRect(rc.x, rc.y, rc.width, rc.height);
        }

        ctx.restore();
    }

其他draw函数都添加上面功能!


直接提供一个url链接地址,观看一下效果:
w3school globalCompsiteOperation demo

将该链接中绘图代码修改成我们封装的渲染器:

<script>
        var gco = new Array();
        gco.push("source-atop");
        gco.push("source-in");
        gco.push("source-out");
        gco.push("source-over");
        gco.push("destination-atop");
        gco.push("destination-in");
        gco.push("destination-out");
        gco.push("destination-over");
        gco.push("lighter");
        gco.push("copy");
        gco.push("xor");

        //循环外分配渲染器和用到的数据结构的内存
        let render = new BLFRender();
        let rect = new Rect(10, 10, 50, 50);
        let circle = new Circle(50, 50, 30);

        for (n = 0; n < gco.length; n++) {
            document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");
            var c = document.createElement("canvas");
            c.width = 120;
            c.height = 100;
            document.getElementById("p_" + n).appendChild(c);
            var ctx = c.getContext("2d");

            //注释掉原来代码
            /*
            ctx.fillStyle = "blue";
            ctx.fillRect(10, 10, 50, 50);
            ctx.globalCompositeOperation = gco[n];
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.arc(50, 50, 30, 0, 2 * Math.PI);
            ctx.fill();
            */

            //使用我们的代码
            render.context = ctx; //重用同一个BLFRender
            render.drawRect(rect);

            //我们在第二个绘制函数中使用合成
            //这时候,rect已经存在画布中,第二次绘制时候,和第一次的像素进行合成
            render.drawCircle(circle, 'blue', true, gco[n]);

            document.write("</div>");
        }
    </script>
图像合成.png

4. 了解源和目标:

在图像合成过程中,涉及到源和目标的概念:

  • 源表示当前正在操作的图形,文本(会光栅化成图像),图像的像素数据
  • 目标表示目前的画布中的像素数据
    例如:
    1. 画布初始化或clear后,是[r,g,b,0]像素集合
    2. render.drawRect(rect)时,rect是源,画布是目标
    3. render.drawCircle(circle)时,circle是源,包含rect的画布是目标
    4. 实际就是一层层的叠上去,在叠的过程中,规定源中的各个像素如何和目标中的像素进行融合,这就是图像合成,因此这些compsiteOp操作应该都是在源操作中规定

demo链接地址:

http://htmlpreview.github.io/?https://github.com/jackyblf/BLF_JS_Demos/blob/master/drawShape.html

htmlpreview.github.io/?https://github.com/jackyblf/BLF_JS_Demos/blob/master/compsite.html

推荐阅读更多精彩内容