canvas绘制多边形
生活随笔
收集整理的這篇文章主要介紹了
canvas绘制多边形
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas繪制多邊形</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid darkcyan;" width="400" height="400"></canvas><script>var c = document.getElementById("canvas").getContext("2d");//定義一個(gè)以（x,y）為中心，半徑為r的規(guī)則n邊型；//每個(gè)頂點(diǎn)都是均勻分布在圓周上//將第一個(gè)頂點(diǎn)放置在最上面，或者指定一定角度//除非最后一個(gè)參數(shù)是true，否則順時(shí)針旋轉(zhuǎn)function polygon(c,n,x,y,r,angle,counterClockwise) {angle = angle || 0;counterClockwise = counterClockwise || false;c.moveTo(x+r*Math.sin(angle),y-r*Math.cos(angle));var delta = 2*Math.PI/n;for(var i=1;i<n;i++){angle+=counterClockwise?-delta:delta;c.lineTo(x+r*Math.sin(angle),y-r*Math.cos(angle));}c.closePath();}c.beginPath();polygon(c,3,50,70,50);polygon(c,4,150,60,50,Math.PI/4);polygon(c,5,255,55,50);c.fillStyle = "#ccc";c.strokeStyle = "#008";c.lineWidth = 5;c.fill();c.stroke();
</script>
</body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/QianBoy/p/7856746.html
總結(jié)
以上是生活随笔為你收集整理的canvas绘制多边形的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux中怎么运行py文件？
- 下一篇： 跨省就医新农合怎么报销流程？