2
在畫布上創建維恩圖表。我試圖爲每個交叉路口和每個圓圈設置不同的顏色。雖然我可以用重疊的圓圈來做到這一點，但我需要讓每個交點成爲自己的一部分，這樣我就可以操縱每個交點的顏色，因爲我將在懸停時進行這種操作。html5 canvas venn 3個圈子
問題是我可以完成所有部分，但最終重疊。以下是現有解決方案的圖像：venn diagram image。需要標記/顯示來自黃色和藍色圓圈的重疊而不影響底部圓圈重疊。這裏是我到目前爲止（我知道這不是最乾淨的，在簡化工作）：
<script>
window.LENS = {};
LENS.init = function(){
var self = this;
this.canvas = document.getElementById('canvas');
this.ctx = canvas.getContext('2d');
this.width = window.innerWidth;
this.height = window.innerHeight;
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight+50; //compensate for margin
this.drawLens(this.ctx, this.width, this.height);
}
LENS.drawLens = function (ctx, windowWidth, windowHeight){
var self = this;
var radius=windowWidth/5.25;
var circle1={x:windowWidth/2.5, y:windowHeight/3, r:radius, color: 'rgb(130,205,240)'};
var circle2={x:windowWidth/1.75, y:windowHeight/3, r:radius, color: 'rgb(255,240,180)'};
var circle3={x:circle1.x+circle1.r/2, y:circle1.y+circle1.r/1.2, r:radius, color: 'rgb(245,120,125)'}; //dividing by 1.2 for visual purposes. radius would be centered, but provides optical illusiion
var intersect1={color:'rgb(0,170,145)'};
var intersect2={color:'rgb(130,70,110)'};
var intersect3={color:'rgb(255,160,75)'};
var intersectCenter={color:'rgb(55,55,55)'};
//draw circle1
//ctx.save(); //important or we lose the context and will hold all drawing
ctx.beginPath();
ctx.arc(circle1.x, circle1.y, circle1.r, 0, 2*Math.PI, false);
ctx.fillStyle=circle1.color;
ctx.strokeStyle=circle1.color;
ctx.stroke();
ctx.fill();
//intersection1 top
ctx.beginPath();
ctx.fillStyle=intersect1.color;
ctx.strokeStyle=intersect1.color;
ctx.globalCompositeOperation='source-atop';
ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);
ctx.fill();
//intersection2 top
ctx.beginPath();
ctx.fillStyle=intersect2.color;
ctx.strokeStyle=intersect2.color;
ctx.globalCompositeOperation='source-atop';
ctx.arc(circle3.x,circle3.y,circle3.r, 0, 2*Math.PI, false);
ctx.fill();
//intersect Center
ctx.beginPath();
ctx.globalCompositeOperation='source-atop'
ctx.arc(circle2.x, circle2.y, circle2.r, 0, 2*Math.PI, false);
ctx.fillStyle=intersectCenter.color;
ctx.strokeStyle=intersectCenter.color;
ctx.stroke();
ctx.fill();
//draw intersection3 bottom
ctx.beginPath();
ctx.fillStyle=intersect3.color;
ctx.strokeStyle=intersect3.color;
ctx.globalCompositeOperation='destination-over';
ctx.arc(circle2.x, circle2.y, circle2.r, 0, 2*Math.PI, false);
ctx.fill();
ctx.stroke();
//intersection 3
ctx.beginPath();
ctx.fillStyle=intersect3.color;
ctx.strokeStyle=intersect3.color;
ctx.globalCompositeOperation='destination-in';
ctx.arc(circle3.x, circle3.y, circle3.r, 0, 2*Math.PI, false);
ctx.fill();
ctx.stroke();
//circle3
ctx.beginPath();
ctx.fillStyle=circle3.color;
ctx.globalCompositeOperation='destination-over';
ctx.arc(circle3.x,circle3.y,circle3.r, 0, 2*Math.PI, false);
ctx.fill();
//redraw circle 1
ctx.beginPath();
ctx.globalCompositeOperation='destination-over';
ctx.arc(circle1.x, circle1.y, circle1.r, 0, 2*Math.PI, false);
ctx.fillStyle=circle1.color;
ctx.strokeStyle=circle1.color;
ctx.stroke();
ctx.fill();
//redraw circle 2
ctx.beginPath();
ctx.globalCompositeOperation='destination-over'
ctx.arc(circle2.x, circle2.y, circle2.r, 0, 2*Math.PI, false);
ctx.fillStyle=circle2.color;
ctx.strokeStyle=circle2.color;
ctx.stroke();
ctx.fill();
}
</script>
