canvas绘制多边形

来源：动视网责编：小采时间：2020-11-27 20:24:44

canvas绘制多边形

canvas绘制多边形:效果图：代码如下：<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>canvas 画多边

推荐度：

点击下载本文 文档为doc格式

导读canvas绘制多边形:效果图：代码如下：<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>canvas 画多边

效果图：

canvas绘制多边形

代码如下：

<!doctype html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
 <title>canvas 画多边形</title>
</head>
<body>
 <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext('2d');
 function draw(x,y,n,r){
 var i,ang;
 ang= Math.PI*2/n;
 ctx.save();
 ctx.fillStyle = 'rgba(255,0,0,.3)';
 ctx.strokeStyle = 'hsl(120,50%,50%)';
 ctx.lineWidth = 1;
 ctx.translate(x,y);
 ctx.moveTo(0,-r);
 ctx.beginPath();
 for(i=0;i<n;i++){
 ctx.rotate(ang);
 ctx.lineTo(0,-r);
 }
 ctx.closePath();
 ctx.fill();
 ctx.stroke();
 ctx.restore();
 }
 draw(100,100,3,40); 
 draw(200,100,4,40);
 draw(300,100,5,40);
 draw(100,200,6,40);
 draw(200,200,7,40);
 draw(300,200,8,40);
</script>
</html>

更多canvas绘制多边形相关文章请关注PHP中文网！

canvas绘制多边形

canvas绘制多边形:效果图：代码如下：<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>canvas 画多边

推荐度：

点击下载本文 文档为doc格式

标签：绘制多边形 canvas

热门焦点

canvas绘制多边形

canvas绘制多边形

canvas绘制多边形

最新推荐

猜你喜欢

热门推荐