canvas绘制不规则四边形

最新推荐文章于 2024-08-12 13:18:32 发布

爱吃黄瓜的喵

最新推荐文章于 2024-08-12 13:18:32 发布

阅读量2.1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_42152696/article/details/103624570

版权

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

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

爱吃黄瓜的喵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas绘制不规则四边形

canvas绘制不规则四边形话不多说，先给大家看看效果图具体效果如下![在这里插入图片描述](https://img-blog.csdnimg.cn/20191219222706640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L...
复制链接

扫一扫