本篇的目的是要了解:
- 漸變填充
- alpha blend
- 圖像合成
- 了解源和目標(biāo)概念
1. 封裝漸變填充方法:
在前幾篇中我們使用了顏色/Pattern進(jìn)行矢量圖形的填充，今天我們來(lái)繼續(xù)最后一種方式的填充:漸變色。封裝代碼如下:
createGradient(params, colors = [{ weight: 0, color: 'red' }, { weight: 1, color: 'blue' }]) {
//坐標(biāo)參數(shù)params必須要有內(nèi)容
if (params == null)
return null;
let g = null;
let len = params.length;
//坐標(biāo)參數(shù)個(gè)數(shù)為0，退出
if (len == 0)
return null;
//坐標(biāo)參數(shù)params必須是4個(gè)或6個(gè)
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個(gè)，還可以多個(gè)
//但是有一個(gè)條件:必須weight之和為1.0
for (let i = 0; i < colors.length; i++) {
g.addColorStop(colors[i].weight, colors[i].color);
}
return g;
}
漸變色的要點(diǎn)提示:
- canvas2d的addColorStop第一個(gè)是權(quán)重參數(shù)，漸變色的權(quán)重之和必須為1.0，具體見(jiàn)下面放射性漸變色測(cè)試代碼.
- 漸變色使用的填充坐標(biāo)系是基于全局坐標(biāo)系表示！
測(cè)試代碼:
//漸變色,3種顏色，權(quán)重為1.0
let colors = [{
weight: 0.1,
color: "blue"
}, {
weight: 0.2,
color: 'green'
}, {
weight: 0.7,
color: 'red'
}];
//矩形漸變繪制
//漸變色的坐標(biāo)定義是矩形中心線
let coords = [550, 225, 750, 225]; //線性 4個(gè)參數(shù)[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 個(gè)參數(shù)[x0,y0,r0,x1,y1,r1]組成內(nèi)圓和外圓
g = render.createGradient(coords /*, colors*/ );
render.drawCircle(new Circle(650, 400, 100), g);
2. alpha blend:
全局alpha blend : canvas2d.globalAlpha進(jìn)行設(shè)置。一旦設(shè)定，瀏覽器會(huì)將繪制的圖像(圖形最后光柵化為圖像)每個(gè)像素的alpha值與globalAlpha進(jìn)行相乘，影響全局。除非必要，盡量不要使用globalAlpha。alpha取值范圍[0,1]
局部alpha blend: style中規(guī)定的顏色的alpha值，僅影響當(dāng)前繪制像素。盡量使用該方式。
image.onload = function(e) {
let pattern = render.createPattern(image);
if (pattern) {
render.drawCircle(new Circle(200, 200, 100), pattern);
//這里增加一個(gè)alpha blend測(cè)試，將圓圖上蒙上一個(gè)紅色，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);
}
}
css顏色表示這篇文檔好好讀并體會(huì)一下:
提示:
16進(jìn)制表示時(shí)，沒(méi)有alpha分量(#FF00FF,僅僅規(guī)定了RGB)
rgba(255,127,128,0.5)表示時(shí)，alpha[0-1]之間，RGB各個(gè)分量取值[0-255]
hsla(120,65%,75%,0.3)表示時(shí)，h[0-360],s和l以%百分比表示，alpha[0,1]
3.封裝圖像合成操作:
關(guān)于圖像合成操作，目前用的不多，以后在webgl中，我們?cè)?strong>GPU fragment shader編程時(shí)候，會(huì)聊很多圖像方面的東西。
對(duì)于我們的渲染器來(lái)說(shuō)，將圖像合成操作功能添加到各個(gè)draw函數(shù)中去吧:
drawRect(rc, style = "red", isFill = true, compsiteOp = '') {
let ctx = this.context;
ctx.save();
//compsiteOp參數(shù) default為空字符串
//如果非空，則設(shè)置為全局合成操作
//規(guī)范點(diǎn)的話，還要進(jìn)行參數(shù)值字符串正確性判斷
//這里就簡(jiǎn)化不做檢測(cè)了
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函數(shù)都添加上面功能！
直接提供一個(gè)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");
//循環(huán)外分配渲染器和用到的數(shù)據(jù)結(jié)構(gòu)的內(nèi)存
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");
//注釋掉原來(lái)代碼
/*
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; //重用同一個(gè)BLFRender
render.drawRect(rect);
//我們?cè)诘诙€(gè)繪制函數(shù)中使用合成
//這時(shí)候，rect已經(jīng)存在畫(huà)布中，第二次繪制時(shí)候，和第一次的像素進(jìn)行合成
render.drawCircle(circle, 'blue', true, gco[n]);
document.write("</div>");
}
</script>
4. 了解源和目標(biāo):
在圖像合成過(guò)程中，涉及到源和目標(biāo)的概念：
- 源表示當(dāng)前正在操作的圖形,文本(會(huì)光柵化成圖像)，圖像的像素?cái)?shù)據(jù)
- 目標(biāo)表示目前的畫(huà)布中的像素?cái)?shù)據(jù)
例如:- 畫(huà)布初始化或clear后，是[r,g,b,0]像素集合
- render.drawRect(rect)時(shí)，rect是源，畫(huà)布是目標(biāo)
- render.drawCircle(circle)時(shí)，circle是源，包含rect的畫(huà)布是目標(biāo)
- 實(shí)際就是一層層的疊上去，在疊的過(guò)程中，規(guī)定源中的各個(gè)像素如何和目標(biāo)中的像素進(jìn)行融合，這就是圖像合成，因此這些compsiteOp操作應(yīng)該都是在源操作中規(guī)定
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
