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中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
详解CSS玩转图片Base64编码
May 25 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 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在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php实现rc4加密算法代码
2012/04/25 PHP
PHP运行模式的深入理解
2013/06/03 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
python生成ppt的方法
2018/06/07 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python安装sklearn模块的方法详解
2020/11/28 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
个人找工作的自我评价
2013/10/17 职场文书
销售部主管岗位职责
2013/12/18 职场文书
学子宴答谢词
2014/01/25 职场文书
教师求职自荐信
2014/03/09 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
欢迎词怎么写
2015/01/23 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android