canvas绘制图像文件方法(Canvas多边形绘制的实现方法)
类别:Web前端 浏览量:2617
时间:2021-10-05 00:17:47 canvas绘制图像文件方法
Canvas多边形绘制的实现方法前言
Canvas绘制多变形非常简单,只要懂得Canvas路径 + 简单的初中数学知识即可完成
CodePen打开
解析
思路如上,非常简单,计算每一个点的位置通过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()至起点 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 使用canvas画个正方形(canvas绘制树形结构可视图形的实现)
- canvas两种绘图方法(canvas 基础之图像处理的使用)
- canvas怎么获取内容(详解canvas.toDataURL报错的解决方案全都在这了)
- 获取canvas画布内容(清除canvas画布内容点擦除+线擦除)
- canvas画法教学(手把手教你实现一个canvas智绘画板的方法)
- jscanvas画折线图(js+canvas实现代码雨效果)
- canvas绘制图形方法(如何使用canvas绘制可移动网格的示例代码)
- canvas指定区域生成图片(canvas实现图片镜像翻转的2种方式)
- canvas设置点击(Canvas高级路径操作之拖拽对象的实现)
- canvas如何在网页上画图形(canvas绘制图片drawImage使用方法)
- html5 canvas touch(html5 canvas手势解锁源码分享)
- canvas实现滚动列表(Canvas实现贝赛尔曲线轨迹动画的示例代码)
- html5canvas案例(h5使用canvas画布实现手势解锁)
- canvas图片显示报错(html2canvas生成的图片偏移不完整的解决方法)
- canvas小程序海报(使用canvas生成含有微信头像的邀请海报没有微信头像问题)
- canvas绘制二进制图片(Canvas获取视频第一帧缩略图的实现)
- ()
- 书法欣赏 宋.志南诗《绝句》(宋.志南诗绝句)
- 每周一首古诗 《绝句》(每周一首古诗绝句)
- 蓝色代表什么(蓝色代表什么性格的人)
- 红色代表什么(红色代表什么情感和含义)
- 南宋志南和尚绝句 杨柳风似庙中来(南宋志南和尚绝句)
热门推荐
- nginx配置详细讲解(Nginx服务快速入门教程)
- html5socket源码(五分钟学会HTML5的WebSocket协议)
- php如何异步操作(php链式操作的实现方式分析)
- elementui自定义坐标(element-ui 上传图片后标注坐标点)
- python交互执行shell脚本(python 利用文件锁单例执行脚本的方法)
- 香港免费云服务器(靠谱的香港云服务器共同点都有哪些)
- 一般用云主机干嘛(免费云主机怎么申请?有什么限制?)
- 服务器启动nginx服务的命令(Nginx服务器添加Systemd自定义服务过程解析)
- 微信小程序接入第三方支付的方法(小程序通过小程序云实现微信支付功能实例)
- CSS网页布局的几个建议
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9