首页 > 代码库 > 一个给力的html5 画多边形的例子
一个给力的html5 画多边形的例子
只需改变参数就能画出你想要的多边形，代码简单！不得不惊叹canvas的强大！
代码奉上
<!doctype html><html><head><meta charset="gb2312"><title>画图</title></head><body> <canvas id = "myCanvas" width = ‘500‘ height = ‘500‘>Canvas画线技巧</canvas><script> var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); function drawPath(x, y, n, r) { var i,ang; ang = Math.PI*2/n //旋转的角度 context.save();//保存状态 context.fillStyle =‘rgba(255,0,0,.3)‘;//填充红色，半透明 context.strokeStyle =‘hsl(120,50%,50%)‘;//填充绿色 context.lineWidth = 1;//设置线宽 context.translate(x, y);//原点移到x,y处，即要画的多边形中心 context.moveTo(0, -r);//据中心r距离处画点 context.beginPath(); for(i = 0;i < n; i ++) { context.rotate(ang)//旋转 context.lineTo(0, -r);//据中心r距离处连线 } context.closePath(); context.stroke(); context.fill(); context.restore();//返回原始状态 } drawPath(100, 100, 3, 40)//在100,100处画一个半径为40的三边形 drawPath(200, 100, 4, 40)//在200,100处画一个半径为40的四角形 drawPath(300, 100, 5, 40)//在300,100处画一个半径为40的五边形 drawPath(100, 200, 6, 40)//在100,200处画一个半径为40的六边形 drawPath(200, 200, 7, 40)//在100,200处画一个半径为40的七边形 drawPath(300, 200, 7, 40)//在300,200处画一个半径为40的八边形</script></body></html>
一个给力的html5 画多边形的例子
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。