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="650