使用canvas绘制水滴（二次贝塞尔曲线、圆弧）
生活随笔
收集整理的這篇文章主要介紹了
使用canvas绘制水滴（二次贝塞尔曲线、圆弧）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用canvas繪制水滴</title><style>html{height: 100%;overflow: hidden}body{height: 100%;margin: 0;}#canvas{background: antiquewhite;}</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>const canvas=document.getElementById('canvas');//canvas充滿窗口canvas.width=window.innerWidth;canvas.height=window.innerHeight;//畫筆const ctx=canvas.getContext('2d');ctx.fillStyle='#00acec';/*三次貝塞爾曲線：bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)圓弧：arc(x,y,半徑，開始弧度，結(jié)束弧度，方向)*///變換-位移// ctx.rotate(Math.PI/12);ctx.translate(100,200);//開始新路徑ctx.beginPath();//指定起點(diǎn)，建立子路徑ctx.moveTo(0,0);//繪制二次貝塞爾曲線ctx.quadraticCurveTo(50,-50,50,-100);//繪制圓弧ctx.arc(0,-100,50,0,Math.PI,true);//繪制二次貝塞爾曲線ctx.quadraticCurveTo(-50,-50,0,0);//顯示路徑// ctx.stroke();ctx.fill();</script>
</body>
</html>
?
總結(jié)
以上是生活随笔為你收集整理的使用canvas绘制水滴（二次贝塞尔曲线、圆弧）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 图像分割—基于区域的图像分割
- 下一篇： tomcat 配置域名和ssl证书