HTML5畫布合併到矩形以形成新形狀

我有一個頁面，您可以在其上繪製正方形。該廣場將代表一個房間，讓你有一個正方形，那麼你再拍了第一方陣，然後兩人將加入HTML5畫布合併到矩形以形成新形狀

它會看起來像這樣 http://puu.sh/bllo7/95e2112d79.png

我需要弄清楚如何讓他們做出正確的形狀，使其看起來像上圖中右側的圖像。

如果這會有所幫助，方信息存儲在points這種格式

[ 
    { 
     start: {x: 312, y: 164}, 
     end: {x: 734, y: 371} 
    }, 
    { 
     start: {x: 696, y: 304}, 
     end: {x: 1060, y: 561} 
    } 
]

資源的任何鏈接，這將有助於我做這將是有很大幫助謝謝

來源

2014-09-04 Ben

可以使用合成在組合矩形周圍創建單個筆劃。

畫出所有的矩形連招
集合成以 '目的地去'。這會導致新圖形「擦除」兩個重疊的現有圖形。
填寫你所有的反應。這將刪除組合矩形的所有輪廓。

這工作，因爲筆劃繪製半內&半外矩形邊框。當您刪除組合矩形的內部時，您將剩下半外側筆劃。

enter image description here

實施例的代碼和一個演示：http://jsfiddle.net/m1erickson/m5jg92wd/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    // draw all rects with strokes 
    ctx.strokeRect(20,20,100,200); 
    ctx.strokeRect(90,110,75,50); 

    // set compositing to erase existing drawings 
    // new drawings will erase existing drawings where the two overlap 
    ctx.globalCompositeOperation='destination-out'; 

    // fill all rects 
    // This "erases" all but the outline stroke 
    ctx.fillRect(20,20,100,200); 
    ctx.fillRect(90,110,75,50); 

    // reset compositing to its default mode 
    ctx.globalCompositeOperation='source-over'; 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2014-09-04 17:01:13 markE

HTML5畫布合併到矩形以形成新形狀

回答

相關問題