【笔记】canvas 绘制足球 —— 第一步 画个球体
创始人
2024-04-26 22:27:33
0

文章目录

  • 一、球体分析
  • 二、足球结构分析
  • 三、canvas常用API
  • 四、画个球体
    • 1.初始化
    • 2.代码
  • 五、加上足球的皮肤


一、球体分析

先上两张图
在这里插入图片描述

在这里插入图片描述

  • 球坐标转直角坐标
    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的比例.

  • 足球(体育运动)_360百科
  • 求足球表面图解!_作业帮

三、canvas常用API

四、画个球体

1.初始化

  • 来个官网示例:






在这里插入图片描述

没有设置宽度和高度的时候,canvas 会初始化宽度为 300 像素和高度为 150 像素(用 width 和 height 属性为明确规定宽高,而不是使用 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,balls = [],angleX = Math.PI / 100,angleY = Math.PI / 100;let Animation = function() {balls = [];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);balls.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.prototype = {paint: function() {var fl = 450ctx.save();ctx.beginPath();var scale = fl / (fl - this.z);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 属性

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...