本篇的目的是要了解:
- 漸變填充
- alpha blend
- 圖像合成
- 了解源和目標概念
1. 封裝漸變填充方法:
在前幾篇中我們使用了顏色/Pattern進行矢量圖形的填充蚜点，今天我們來繼續(xù)最后一種方式的填充:漸變色轧房。封裝代碼如下:
createGradient(params, colors = [{ weight: 0, color: 'red' }, { weight: 1, color: 'blue' }]) {
//坐標參數(shù)params必須要有內(nèi)容
if (params == null)
return null;
let g = null;
let len = params.length;
//坐標參數(shù)個數(shù)為0，退出
if (len == 0)
return null;
//坐標參數(shù)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第一個是權(quán)重參數(shù)奶镶，漸變色的權(quán)重之和必須為1.0，具體見下面放射性漸變色測試代碼.
- 漸變色使用的填充坐標系是基于全局坐標系表示陪拘！
測試代碼:
//漸變色,3種顏色厂镇，權(quán)重為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個參數(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 個參數(shù)[x0,y0,r0,x1,y1,r1]組成內(nèi)圓和外圓
g = render.createGradient(coords /*, colors*/ );
render.drawCircle(new Circle(650, 400, 100), g);
漸變效果.png
2. alpha blend:
全局alpha blend : canvas2d.globalAlpha進行設(shè)置。一旦設(shè)定左刽，瀏覽器會將繪制的圖像(圖形最后光柵化為圖像)每個像素的alpha值與globalAlpha進行相乘捺信，影響全局。除非必要欠痴，盡量不要使用globalAlpha迄靠。alpha取值范圍[0,1]
局部alpha blend: style中規(guī)定的顏色的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,僅僅規(guī)定了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.封裝圖像合成操作:
關(guān)于圖像合成操作缨硝，目前用的不多，以后在webgl中罢低，我們在GPU fragment shader編程時候查辩，會聊很多圖像方面的東西胖笛。
對于我們的渲染器來說，將圖像合成操作功能添加到各個draw函數(shù)中去吧:
drawRect(rc, style = "red", isFill = true, compsiteOp = '') {
let ctx = this.context;
ctx.save();
//compsiteOp參數(shù) default為空字符串
//如果非空宜岛，則設(shè)置為全局合成操作
//規(guī)范點的話长踊，還要進行參數(shù)值字符串正確性判斷
//這里就簡化不做檢測了
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ù)都添加上面功能！
直接提供一個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");
//注釋掉原來代碼
/*
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);
//我們在第二個繪制函數(shù)中使用合成
//這時候身弊，rect已經(jīng)存在畫布中，第二次繪制時候列敲，和第一次的像素進行合成
render.drawCircle(circle, 'blue', true, gco[n]);
document.write("</div>");
}
</script>
圖像合成.png
4. 了解源和目標:
在圖像合成過程中阱佛，涉及到源和目標的概念：
- 源表示當前正在操作的圖形,文本(會光柵化成圖像)，圖像的像素數(shù)據(jù)
- 目標表示目前的畫布中的像素數(shù)據(jù)
例如:- 畫布初始化或clear后戴而，是[r,g,b,0]像素集合
- render.drawRect(rect)時凑术，rect是源，畫布是目標
- render.drawCircle(circle)時填硕，circle是源麦萤，包含rect的畫布是目標
- 實際就是一層層的疊上去，在疊的過程中扁眯，規(guī)定源中的各個像素如何和目標中的像素進行融合壮莹，這就是圖像合成，因此這些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
