canvas绘制不规则四边形

最新推荐文章于 2023-02-23 16:59:28 发布

爱吃黄瓜的喵

最新推荐文章于 2023-02-23 16:59:28 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript js canvas

本文链接：https://blog.youkuaiyun.com/weixin_42152696/article/details/103624570

这篇博客主要介绍了如何利用JavaScript和HTML5的canvas元素来绘制不规则四边形。通过示例代码，展示了具体的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"