Canvas多边形绘制的实现方法
2019-08-05 15:21
274 查看
前言
Canvas绘制多变形非常简单,只要懂得Canvas路径 + 简单的初中数学知识即可完成
解析
思路如上,非常简单,计算每一个点的位置通过lineTo()绘制路径即可
核心代码解析如下(或在CodePen中查看):
function drawPolygonPath(sideNum, radius, originX, originY, ctx){ ctx.beginPath(); const unitAngle = Math.PI * 2 / sideNum; //计算单元角度 let angle = 0; //初始角度 let xLength, yLength; // ctx.moveTo(originX, originY); for(let i = 0; i < sideNum; i++){ //遍历计算点,并lineTo()绘制路径 xLength = radius * Math.cos(angle); yLength = radius * Math.sin(angle); ctx.lineTo(originX + xLength, originY - yLength);//绘制路径 angle += unitAngle; } ctx.closePath();//闭合路径,也可在for循环中多一次循环lineTo()至起点 }
以上就是本文的全部内容,希望对大家的学习有所帮助
相关文章推荐
- 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo
- js+html5实现canvas绘制简单矩形的方法
- js+html5实现canvas绘制圆形图案的方法
- js+html5实现canvas绘制镂空字体文本的方法
- js+html5实现canvas绘制简单矩形的方法
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
- canvas快速绘制圆形、三角形、矩形、多边形方法介绍
- 使用Canvas的drawTextOnPath方法实现沿着Path绘制文本
- js+html5实现canvas绘制网页时钟的方法
- js+html5实现canvas绘制镂空字体文本的方法
- 【实例】html5-canvas中实现绘制虚线的方法
- js+html5实现canvas绘制圆形图案的方法
- 一种通过鼠标操作实现多边形的绘制的实现方法
- js+html5实现canvas绘制椭圆形图案的方法
- C#绘制各种统计图的实现方法
- js+HTML5实现canvas多种颜色渐变效果的方法
- 用Canvas可以实现很多特效,这里仅仅列出在Canvas上更改字体以及背景的方法。
- 在HTML5的Canvas上绘制椭圆的几种方法
- js+HTML5实现canvas多种颜色渐变效果的方法
- 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内。以及两点间的测距功能