Canvas多边形绘制的实现方法


Posted in HTML / CSS onAugust 05, 2019

前言

Canvas绘制多变形非常简单,只要懂得Canvas路径 + 简单的初中数学知识即可完成

Canvas多边形绘制的实现方法

CodePen打开

解析

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()至起点
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 #HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 #HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 #HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 #HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 #HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 #HTML / CSS
Canvas图片分割效果的实现
Jul 29 #HTML / CSS
You might like
献给php初学者(入门学习经验谈)
2010/10/12 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python文件处理
2016/02/29 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
python开发入门——列表生成式
2020/09/03 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
音乐幼师求职信
2014/07/09 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
长城导游词
2015/01/30 职场文书
统招统分证明
2015/06/23 职场文书
党员转正大会主持词
2015/07/02 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL