【前端html/js】canvas的水滴案例

最新推荐文章于 2024-04-26 16:25:45 发布

飛之宇

最新推荐文章于 2024-04-26 16:25:45 发布

阅读量359

点赞数 1

分类专栏：学习文章标签：前端 javascript html

本文链接：https://blog.csdn.net/zfy1999/article/details/122469098

版权

学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

【前端html/js】canvas的水滴案例

canvas的水滴案例

案例效果图

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>09水滴案例</title>
</head>
<body>
<canvas id="curve" width="600" height="600"></canvas>
<script type="text/javascript">
	let curve = document.getElementById('curve');
	let ctx  = curve.getContext('2d');
	
	// 改变坐标轴
	ctx.translate(450,450);
	
	ctx.beginPath();
	
	ctx.moveTo(0,0);
	// 右边二次贝塞尔曲线
	ctx.quadraticCurveTo(100,-100,100,-200);
	// 上半圆
	ctx.arc(0,-200,100,0,Math.PI,true);
	// 左边边二次贝塞尔曲线
	ctx.quadraticCurveTo(-100,-100,0,0);
	
	ctx.strokeStyle="darkturquoise";
	ctx.fillStyle="paleturquoise"
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
		
</script>
</body>
</html>

github

写于:2022年1月13日
作者QQ：420318184
邮箱:fy@0fy0.com

飛之宇

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端html/js】canvas的水滴案例

【前端html/js】canvas的水滴案例canvas的水滴案例代码如下<!DOCTYPE html><html><head><meta charset="utf-8"><title>09水滴案例</title></head><body><canvas id="curve" width="600" height="600"></canvas><scrip
复制链接

扫一扫