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>
寫于:2022年1月13日
作者QQ：420318184
郵箱:fy@0fy0.com
