HTML5画布合并到矩形以形成新形状 [英] HTML5 Canvas merging to rectangles to form a new shape
问题描述
我有一个页面，您将可以在其上绘制正方形.正方形将代表一个房间，因此您有一个正方形，然后在第一个正方形上绘制另一个正方形，然后两个将合并
它看起来像这样
<！doctype html>< html>< head>< link rel ="stylesheet" type ="text/css" media ="all" href ="css/reset.css"/><！-重置CSS->< script type ="text/javascript" src ="http://code.jquery.com/jquery.min.js"></script>< style>身体{background-color:象牙色；}canvas {border:1px纯红色；}</style>< script>$(function(){var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");//用笔触绘制所有矩形ctx.strokeRect(20,20,100,200);ctx.strokeRect(90,110,75,50);//设置合成以擦除现有图形//新的图形会删除两个重叠的现有图形ctx.globalCompositeOperation ='目的地出站';//填充所有矩形//这会擦除"轮廓笔划以外的所有内容ctx.fillRect(20,20,100,200);ctx.fillRect(90,110,75,50);//将合成重置为默认模式ctx.globalCompositeOperation ='源于';});//结尾$(function(){});</script></head><身体>< canvas id ="canvas" width = 300 height = 300</canvas></body></html> I have a page that you will be able to draw squares on it. The squares will represent a room, so you have one square, then you make another over the first square and then two will join
It will looks like this http://puu.sh/bllo7/95e2112d79.png
And functions like so http://jsfiddle.net/bLenxexL/
I need to figure out how get them squares to make another shape that will look like the image on the right of the picture above.
If this helps, the square info is stored in points in this format
[
{
start: {x: 312, y: 164},
end: {x: 734, y: 371}
},
{
start: {x: 696, y: 304},
end: {x: 1060, y: 561}
}
]
Any links to resources that will help me do this will be of much help thank you
You can use compositing to create a single stroke around your combined rectangles.
draw all your rectangles with strokes
set compositing to 'destination-out'. This causes new drawings to "erase" existing drawings where the two overlap.
fill all your rects. This erases all but the outline of the combined rectangles.
This works because strokes are drawn half-inside & half-outside the border of rectangles. When you erase the inside of the combined rectangles you are left with the half-outside strokes.
Example code and a Demo: 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>
这篇关于HTML5画布合并到矩形以形成新形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
