本篇的目的是要了解:
- 渐变填充
- alpha blend
- 图像合成
- 了解源和目标概念
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. 了解源和目标:
在图像合成过程中，涉及到源和目标的概念：
- 源表示当前正在操作的图形,文本(会光栅化成图像)，图像的像素数据
- 目标表示目前的画布中的像素数据
例如:- 画布初始化或clear后，是[r,g,b,0]像素集合
- render.drawRect(rect)时，rect是源，画布是目标
- render.drawCircle(circle)时，circle是源，包含rect的画布是目标
- 实际就是一层层的叠上去，在叠的过程中，规定源中的各个像素如何和目标中的像素进行融合，这就是图像合成，因此这些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
