Canvas(ベン図を描画)

ベン図

論理和 (OR) 論理積 (AND) 排他的論理和 (XOR) A - B
論理和の否定 (NOR) 論理積の否定 (NAND) 排他的論理和の否定 (XNOR) B - A

<canvas id="OR" width="150" height="100"></canvas>
        .
        .

<!--[if lt IE 9]>
<script src="excanvas.js"></script>
<![endif]-->

<script>
//<![CDATA[

/* 各ベン図の図形合成パターン */
var gcop = {
    "OR"   : ["source-over",    "source-atop"],   // 論理和
    "NOR"  : ["source-over",    "source-out" ],   // 論理和の否定
    "AND"  : ["source-in",      "source-atop"],   // 論理積
    "NAND" : ["source-in",      "xor"        ],   // 論理積の否定
    "XOR"  : ["xor",            "source-atop"],   // 排他的論理和
    "XNOR" : ["xor",            "xor"        ],   // 排他的論理和の否定
    "A-B"  : ["destination-out","source-atop"],   // A - B
    "B-A"  : ["source-out",     "source-atop"],   // B - A
};

/* ベン図描画 */ 
function VennDiagram( type ) {
    // 円1 定数
    var x1 = 50; var y1 = 50; var r1 = 40; var s1 = 0;
    // 円2 定数
    var x2 = 100; var y2 = 50; var r2 = 40; var s2 = 0;
    // 四角 定数
    var x3 = 5; var y3 = 5; var w = 140; var h = 90;

    var canvas = document.getElementById( type );   // canvas オブジェクト
    /* オブジェクトが存在しない、ブラウザが Canvas 未対応の場合 */
    if ( ! canvas || ! canvas.getContext ) {
        return false;   // 処理を終了
    }
    var ctx = canvas.getContext( '2d' );   // 描画コンテキスト

    /* 円1を描画 */
    ctx.beginPath();   // 線を描く宣言
    ctx.fillStyle = '#ff9999';   // 塗りつぶす色やスタイル
    // 円(中心x, y座標, 半径, 始点, 終点, 時計回り)
    ctx.arc( x1, y1, r1, s1, Math.PI * 2.0, true );
    ctx.fill();   // 塗りつぶす

    /* 円2を描画 */
    ctx.globalCompositeOperation = gcop[type][0];   // 図形の合成方法
    ctx.beginPath();
    ctx.fillStyle = '#ff9999';
    ctx.arc( x2, y2, r2, s2, Math.PI * 2.0, true );
    ctx.fill();

    /* 四角を描画 */
    ctx.globalCompositeOperation = gcop[type][1];   // 図形の合成方法
    ctx.beginPath();
    ctx.fillStyle = '#ff9999';
    ctx.rect( x3, y3, w, h );   // 四角(始点x, y座標, 幅, 高さ)
    ctx.fill();

    /* 線を描画 */
    ctx.globalCompositeOperation = 'source-over';   // 図形の合成方法
    ctx.strokeStyle = "#333333";   // 線の色やスタイル
    ctx.beginPath();
    ctx.arc( x1, y1, r1, s1, Math.PI * 2.0, true );   // 円1
    ctx.stroke();   // 線を描画
    ctx.beginPath();
    ctx.arc( x2, y2, r2, s2, Math.PI * 2.0, true );   // 円2
    ctx.stroke();
    ctx.beginPath();
    ctx.rect( x3, y3, w, h );   // 四角
    ctx.stroke();

    /* 文字を描画 */
    ctx.fillStyle = '#333333';   // 塗りつぶす色やスタイル
    // フォント(スタイル サイズ 種類)
    ctx.font = "bold 8pt arial, verdana, sans-serif";
    ctx.fillText( 'A', x1 - 5, y1 + 5 );   // 塗りつぶしのテキスト
    ctx.fillText( 'B', x2 + 5, y2 + 5 );
}
VennDiagram( 'OR' );
//]]>
</script>
</body>