canvas繪製不規則四邊形
話不多說，先給大家看看效果圖
具體效果如下
具體代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*爲了能夠設置兩個標籤疊加在一起，需要設置其父標籤*/
.father{
/*標籤位置設置爲相對的*/
position: relative;
text-align: center;
width: 800px;
}
/*canvas的大小需要在起標籤內設置，否則會拉伸或縮小默認的大小*/
.canvas{
border:1px solid black;
/*位置絕對*/
position: absolute;
top: 0;
left: 110;
/*設置所在層數，在上層*/
z-index: 1;
}
/*需要將img背景圖的尺寸和canvas的尺寸設置相同*/
.canvas_bgp{
width: 650px;
height: 414px;
/*位置絕對*/
position: absolute;
top: 0;
left: 110;
}
</style>
</head>
<body>
<div class="father">
<canvas id="cvs" width="650px" height="414px" class="canvas">不支持canvas</canvas>
<img src="ilovechina.jpg" class="canvas_bgp">
</div>
<script type="text/javascript">
var cvs = document.getElementById("cvs");
var cvsClientRect = cvs. getBoundingClientRect();
var points = [];
cvs.addEventListener("mousedown", mousedownHandler, false);
var ctx = cvs.getContext('2d');
var flag = false;
function mousedownHandler (event){
if(points.length<=2){
if(event.button == 0 && !flag) {
points.push({
x: event.pageX - cvsClientRect.x,
y: event.pageY - cvsClientRect.y
});
if(points.length>=1) {
cvs.addEventListener("mousemove", mousemoveHandler, false);
}
drawPolygon(points);
}
}else if(event.button === 0) {
flag = true;
cvs.removeEventListener("mousemove", mousemoveHandler);
}
}
function drawPolygon(points) {
ctx.clearRect(0,0,650,414);
ctx.strokeStyle = '#ff0000';
ctx.beginPath();
ctx.moveTo(points[0].x,points[0].y);
for(var i=1;i<points.length;i++) {
ctx.lineTo(points[i].x,points[i].y);
}
ctx.closePath();
ctx.stroke();
}
function mousemoveHandler(event) {
drawPolygon(points.concat({
x: event.pageX - cvsClientRect.x,
y: event.pageY - cvsClientRect.y
}));
}
</script>
</body>
</html>