一、球体分析

先上两张图

球坐标转直角坐标
x=ρ×sin(φ)×cos(θ)x = \rho \times sin(\varphi) \times cos(\theta) x=ρ×sin(φ)×cos(θ)
y=ρ×sin(φ)×sin(θ)y = \rho \times sin(\varphi) \times sin(\theta) y=ρ×sin(φ)×sin(θ)
z=ρ×cos(φ)z = \rho \times cos(\varphi) z=ρ×cos(φ)

φ=acos(k)\varphi = acos(k) φ=acos(k)
θ=φ×n×π\theta = \varphi \times \sqrt{n \times \pi} θ=φ×n×π

二、足球结构分析

传统足球是以皮革或其它合适的材料制成,即20块正六边形（白）和12块正五边形（黑）一共32块皮组成,也就是5：3的比例.,顶点数为60,棱数为90

足球(体育运动)_360百科

求足球表面图解!_作业帮

三、canvas常用API

save：将当前状态放入栈中，保存 canvas 全部状态；
beginPath：清空子路径列表开始一个新路径；
arc：圆弧路径的圆心在 (x, y) 位置，半径为 r，根据指定的方向从 startAngle 开始绘制，到 endAngle 结束。
fillStyle：填充样式
fill：根据当前的填充样式，填充当前或已存在的路径
restore：将 canvas 恢复到最近的保存状态

四、画个球体

1.初始化

来个官网示例：

<!DOCTYPE html>
<html>
<body><canvas id='cas' width="1000" height="500"></canvas>
</body>
<script>let canvas = document.getElementById("cas"),let ctx = canvas.getContext("2d")ctx.fillStyle = "rgb(200,0,0)";ctx.fillRect (10, 10, 55, 50);ctx.fillStyle = "rgba(0, 0, 200, 0.5)";ctx.fillRect (30, 30, 55, 50);
</script>
</html>

没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素（用 width 和 height 属性为<canvas>明确规定宽高，而不是使用 CSS，否则可能会扭曲变形）

2.代码

 body{background-color: black;}

let canvas = document.getElementById("cas"),ctx = canvas.getContext("2d")// 球心位置vpx = window.innerWidth / 2,vpy = window.innerHeight / 2,// 球体半径Radius = 150,points = [],angleX = Math.PI / 100,angleY = Math.PI / 100;let Animation = function() {points = [];// 点的数量let num = 500;for (let i = 0; i <= num; i++) {let k = -1 + 0.004*i;let a = Math.acos(k);var b = a * Math.sqrt(num * Math.PI);var x = Radius * Math.sin(a) * Math.cos(b);var y = Radius * Math.sin(a) * Math.sin(b);var z = Radius * Math.cos(a);var b = new point(x, y, z, 1.5);points.push(b);b.paint();}}// 单个点的构造方法（包含三个坐标值，半径，直径）var point = function(x, y, z, r) {this.x = x;this.y = y;this.z = z;this.r = r;this.width = 2 * r;}// point在原型链上增加paint方法point.prototype = {paint: function() {var fl = 450// 保存当前状态ctx.save();// 开始新路径的绘制ctx.beginPath();// 缩放值（1.5 ~ 0.5）var scale = fl / (fl - this.z);// 透明度值（1 ~ 0）var alpha = (this.z + Radius) / (2 * Radius);// 单个点绘制（半径根据焦距比例进行缩放）ctx.arc(vpx + this.x, vpy + this.y, this.r * scale, 0, 2 * Math.PI, true);// 单个点的透明度进行参数配置，越远越浅ctx.fillStyle = "rgba(255,255,255," + (alpha + 0.5) + ")"// 根据填充样式填充路径ctx.fill();// ctx.restore();}}Animation()

五、加上足球的皮肤

未完待续。。。

HTML canvas fill() 方法
HTML canvas fillStyle 属性

【笔记】canvas 绘制足球 —— 第一步画个球体相关推荐

如何用c++画图_画图教室 | 绘制Mapping第一步：美团搜索火锅串串香...认真的！...
画图之前总要做好万全准备,收拾桌子.擦擦电脑.打开某黄色蓝色APP点个外卖...有人说这都是浪费时间拖延行为,今天小编要在此正名,起码点开外卖不是!! 看看这张汇集了成都火锅.串串.茶馆等美食大数据的 ...
圆头像微信小程序绘图_小程序canvas绘制圆形微信头像
提示:canvas画布绘画图片的时候,图片不能是互联网图片,必需是本地图片才可以正常绘制. 第一步:获取客户受权,下载微信头像图片到本地.pleaseSign: function(event) { w ...
canvas绘制坐标系
课程目标: 1.绘制坐标系需要用到什么核心函数? 2.步骤是什么? 3.源代码? 1.绘制坐标系需要用到什么核心函数? fill() beginPath() moveTo() lineTo() str ...
canvas绘制表格
课程目标: 1.绘制表格需要什么核心方法? 2.步骤是怎么样的? 3.源代码 1.绘制表格需要什么核心方法? Math.floor beginPath moveTo lineTo strokeStyl ...
python pygame 游戏实践：俄罗斯方块(Tetris Game)第一步
正在学习俄罗斯方块(Tetris Game)游戏, 主要参考Tetris with PyGame | Python Assets,不过有所修改,原作的class 太复杂, 不好理解, 试图用自己习惯的 ...
pythonturtle画飞机_浅谈pygame编写外星人入侵游戏第一步(屏幕上绘制飞机)......
本人小白刚开始学习python半月,到目前将python基础语法跑了一遍,不算透彻,只是有一些映像...... 于是学着做外星人入侵游戏,想从项目中深度学习,直接上目前的效果图: --------- ...
【前端学习笔记—canvas标签和使用canvas画哆啦A梦案例】
目录 canvas 1. canvas是H5新增标签 2.使用canvas画出矩形 (1)第一步,要新建画布 (2)第二步,要创建一支画笔 (3)第三步,用canvas画出矩形 3. 如何使用canv ...
canvas 在其他画好的上面继续画_详解canvas绘制多张图的排列顺序问题
您好,请教您一个html5 canvas的问题: 我在canvas您好,请教一个html5 canvas的问题: 我在canvas中画了多个图形,有图像canvas可以实现首先canvas要响应鼠标 ...
移动架构 (一) 架构第一步，学会画各种 UML 图。
距离上一个 "性能优化系列" 已经快一个月没有发布文章了,最近公司真的是太忙了,甚是想念掘友们啊.最近把学习架构方面的知识记录下来,供自己和掘友们一起学习. 注意: 文章中 UML ...

【笔记】canvas 绘制足球 —— 第一步画个球体

文章目录

一、球体分析

二、足球结构分析

三、canvas常用API

四、画个球体

1.初始化

2.代码

五、加上足球的皮肤

【笔记】canvas 绘制足球 —— 第一步画个球体相关推荐

最新文章

热门文章

【笔记】canvas 绘制足球 —— 第一步 画个球体

文章目录

一、球体分析

二、足球结构分析

三、canvas常用API

四、画个球体

1.初始化

2.代码

五、加上足球的皮肤

【笔记】canvas 绘制足球 —— 第一步 画个球体相关推荐

最新文章

热门文章

【笔记】canvas 绘制足球 —— 第一步画个球体

【笔记】canvas 绘制足球 —— 第一步画个球体相关推荐