canvas学习笔记01：Math.sin & Math.cos

最新推荐文章于 2022-04-29 23:06:36 发布
最新推荐文章于 2022-04-29 23:06:36 发布
阅读量177 收藏
点赞数
原文链接：http://www.cnblogs.com/zhuzf/p/3580672.html
版权

  

<!DOCTYPE html> <html> <head> <meta charset="gbk"> </head> <body> <canvas width="1000" height="600" id="c"></canvas> <script> (function (w) { w['raf'] = w['requestAnimationFrame'] || w['webkit'+r] || w['moz'+r] || w['ms'+r] || w['o'+r] || function(c){ w.setTimeout(c, 1000 / 60); }; var radians = function (deg) { return deg * Math.PI / 180; }; function Fx (x,y,r,cxt){ this.x = x; this.y = y; this.r = r; this.cxt = cxt; this.step = 30; this.counter = 0; cxt.canvas.width = 1000; cxt.canvas.height = 600; this.run(); }; Fx.prototype = { 'run' : function (){ var that = this, c = this.cxt, angle = radians(360* this.counter/this.step); c.clearRect(0,0,c.canvas.width,c.canvas.height); c.save(); c.beginPath(); c.arc( this.x, this.y, 5 , 0 , 2*Math.PI); c.arc( this.x+Math.sin(angle)*this.r, this.y+Math.cos(angle)*this.r, 5 , 0 , 2*Math.PI); c.fillStyle = 'red'; c.fill() c.restore(); if (this.counter>=this.step) { this.counter = 0; }else{ this.counter ++; } setTimeout(function (){ that.run.call(that); },30); } }; w['Fx'] = Fx; }(window)); var cm = new Fx(500,300,200,document.getElementById('c').getContext('2d')); </script> </body> </html>

运行代码

转载于:https://www.cnblogs.com/zhuzf/p/3580672.html

weixin_30284355
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
d3nubula:d3.js && Canvas创建的数字图表
05-19
D3 && Canvas创建的数字图表。 演示版 跑步 使用webpack支架来运行此项目。 $ npm install $ npm run dev 特征 来自的地图数据 D3.js创建的世界地图 画布创建的粒子动画 的数据源 来自的数字计数动画
九.CANVAS Math.atan和Math.atan2的区别
小漠007的专栏
01-29 2029
在cavans中，凡是涉及角度都用“弧度”表示，例如180度就应该写成Math.PI,e而360度就该写成Math.PI*2, 在实际开发中，推荐一下写法： 度数*Math.PI/180 CANVAS使用的是W3C坐标系： 三角函数公式： Math.atan的弊端： tan度=X/Y; 坐标轴有四个像限： X/Y=-X/-Y -X/Y=X/Y 这种情况会
Canvas ——画函数线
qq_45935715的博客
04-29 1068
请运用HTML5的Canvas功能，画出以下的三个数学图形。使用Math.sin(x), Math.exp(x)函数，其中x以Math.PI(3.14159)为单位。请同学完成此网页内容与相应所需的java script。
《每周一点canvas动画》——三角函数
weixin_34355559的博客
04-12 170
本节主要内容有： 三角函数介绍 常用三角函数解析 鼠标跟随角度旋转 看到三角函数，勾股定理这样的数学名词是不是有种双腿打颤的感觉啊！好吧，就算你已经吓尿了，也不能否认我们中学学习的知识终于有了用武之地，挽起袖子，开整！！！ 1、三角函数 什么是三角函数呢？简单的定义：所谓三角函数，在几何上来说就是夹角与边的关系！为了更直观的表示，也为...
JS Math.sin() 与 Math.cos() 用法(画圆)
chelen_jak的专栏
05-25 1万+
原文出处：https://blog.csdn.net/u010227447/article/details/45892745Math.sin(x)      x 的正玄值。返回值在 -1.0 到 1.0 之间；Math.cos(x)    x 的余弦值。返回的是 -1.0 到 1.0 之间的数；这两个函数中的X 都是指的“弧度”而非“角度”, 弧度的计算公式为： 2*PI/360*角度；30° 角...
canvas分享之三角函数（1）
Jour的博客
08-25 2015
这一节会分为两部分来讲，在第一部分主要讲下面这三个部分： 三角函数! 常用三角函数 角度旋转（运用实例） 在下一节主要讲解： 波形运动 圆周运动 两点间的距离 ok!现在开始我们的上部分，看到三角函数，勾股定理这样的数学名词是不是感到双腿打颤啊。好吧！就算你已经吓尿了，也不能否认我们初中学习的知识终于有了用武之地，挽起袖子，开整！！！
cos-sin:使用cos和sin函数HTML Canvas Math示例
04-18
这个"cos-sin"项目是关于如何利用HTML Canvas结合Math中的余弦（cos）和正弦（sin）函数来创建动态动画的一个示例。本文将深入探讨这个主题，包括余弦和正弦函数的基本概念、它们在Canvas中的应用，以及如何使用...
canvas.ts:Node.js Canvas LMS客户端
04-10
《canvas.ts: Node.js Canvas LMS客户端初探》 Canvas.ts是一个基于Node.js的客户端库，主要用于与Canvas Learning Management System (LMS) 进行交互。Canvas LMS是一款广泛使用的在线学习平台，它允许教师创建...
fabric-canvas:fabric.js的Web组件包装器
05-16
声明性API 自适应画布尺寸 fabric.js ES模块 | 安装安装fabric-canvas ： npm i fabric-canvas --save用法将Web组件导入您的应用程序： import 'fabric-canvas' ; 或导入静态版本： import 'fabric-canvas/src/...
微信小程序开发问答《七十六》canvas绘制图片模糊 & Math.js如何引入 ...
03-29
1、微信小程序中的canvas绘制图片截图，拿到的图片会模糊？ (此图片来源于网络，如有侵权，请联系删除! ) 需求是我在微信小程序中使用canvas把图片绘制到图中黑框区域，然后进行编辑操作最后拿到编辑后的图片，图片...
【基础知识】HTML5 Canvas 学习Canvas需要的数学知识:代数方程、三角函数、向量运算等（图文、举例）
苏一恒
08-24 1963
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 目录 为什么要数学知识 需要有哪些数学基础？ 1.求解代数方程 2.三角函数 2.1角的度量：角度和弧度 2.2正...
Math.cos()和Math.sin()和Math.atan()
vcxiaohan的博客
05-14 5030
数学上： cos(60°) = 0.5 js： Math.cos(Math.PI/180*60) = 0.5000000000000001 原因： 近似值，为什么不直接为0.5 呢？因为Math.PI其实也只是PI的近似值，如果是PI的精确值的话，结果肯定是0.5了。
JS Math.sin() 与 Math.cos() 用法
getdate的专栏
09-24 1万+
Math.sin(x)      x 的正玄值。返回值在 -1.0 到 1.0 之间； Math.cos(x)    x 的余弦值。返回的是 -1.0 到 1.0 之间的数； 这两个函数中的X 都是指的“弧度”而非“角度”，弧度的计算公式为： 2*PI/360*角度； 30° 角度 的弧度 = 2*PI/360*30   如何得到圆上每个点的坐标？ 解决思路：根据三角形的正玄、余弦来
canvas绘图数学知识总结
weixin_30429201的博客
01-30 174
题外话： 最近看了一本书叫 《HTML5 Canvas核心技术 图形、动画与游戏开发》已经算是看了85%，基本接近尾声，所以近期会多总结一些关于canvas的东西， 这本书讲的还算可以，最大的障碍就是一些数学知识和理论的应用，第八章的碰撞检测比较难理解，看这部分的时候，我感觉非常吃力，向量运算是主要技术点， 我这本书是以阅读源码为主的，有兴趣的朋友可以看看，大家交流一下。 三角函数 ca...
Canvas 实战: 水波图
超悠閒的博客
12-01 1405
Canvas 实战: 水波图 文章目录Canvas 实战: 水波图简介参考正文实现原理绘图开始绘制基本 sin 图形使波形流动上色并切边完成结语 简介 由于 Canvas 的基础功能太广了，有机会的话会出一篇基础的 Canvas 使用教学。本篇就暂时先默认小伙伴已经看过一些些 Canvas 基础(其实只要知道 getContext('2d') 就行啦)，本篇将来介绍使用 Canvas 画出一个动态的水波图，详细公式和过程可以查阅参考一的链接哦～ 参考 Canvas制作水波图实现原理
利用Math.cos和Math.sin计算当前角度所对应方位
xyylchq的专栏
08-30 3万+
根据Math.cos和Math.sin来实现不同的方位判断，想着借助该Demo可以做成时钟计时的小事例、类似于弹弹堂中的调整炮弹发射方向的小Demo。主要根据下面函数来计算： var angleRadians:Number = angle * Math.PI / 180; //
H5 Canvas绘制三角函数图像
Blog for 明月依希
07-09 5331
三角函数sin、cos、tan、sinh、cosh、tanh js 的Math库，自带了许多常见函数方法，其中关于 三角函数的求解还是很齐全的，于是想到，利用canvas 绘制一个比较准确的 sin、cos、tan、sinh、cosh、tanh图像。 canvas绘制坐标轴 坐标轴由两条直线构成，直接将坐标定在中心点就好，这样容易绘制。同时为坐标的箭头定义边长。 //xy轴 ...
JS 中 Math 对象的【三角函数】的用法与实战例子【打靶游戏】 | Math.tan(), Math.cos(), Math.sin()
热门推荐
林洪炳的日常技术积累
04-21 3万+
如果用JS做前端的时候，就会发现跟 Math 类打交道比较少。但是如果用 Node.js 做后台，或用 JS 写游戏的时候，Math 类就会无处不在，尤其是 random()、round()、abs()、ceil()、floor() 等方法很常用。本篇文章就来说说Math 类中的 sin()、cos()、tan() 这三个中学时期的数学重点究竟在JS中怎么用。
Canvas绘制图形（一）
依宸2016
07-08 400
function draw(id) { var canvas = document.getElementById(id); var context = canvas.getContext("2d"); context.fillStyle = "#eeeeef"; context.fill
function spawnEnemy(n) { setInterval(() => { for (let idx = 0; idx < n; idx++) { let radius = Math.random() * (20 - 4) + 8; let x = Math.random() * canvas.width - radius; let y = Math.random() * canvas.height + radius; let color = hsl(${Math.floor(Math.random() * 360)},70%,50%); let angle = Math.atan2(player.y - y, player.x - x); let vector = { x: Math.cos(angle) * 2, y: Math.sin(angle) * 2, }; let enemyObj = new Enemy(x, y, radius, color, vector); enemyArrays.push(enemyObj); } }, 1000); } function animate() { if (!gameStarted) { // 如果游戏未开始，不执行游戏逻辑 return; } player.draw(ctx); ctx.fillStyle = "rgba(0,0,0,0.2)"; // ctx.clearRect(0,0,canvas.width,canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height); enemyArrays.forEach((enemy, idx) => { enemy.draw(ctx); enemy.update(); // 判断,从enemyArrays数组中删除 if (enemy.x <= 0 || enemy.x >= canvas.width || enemy.y <= 0 || enemy.y >= canvas.height) { enemyArrays.splice(idx, 1); } }); //shell shellArrays.forEach((shell, idx) => { shell.draw(ctx); shell.update(); enemyArrays.forEach((enemy, j) => { // 碰撞判断 let distance = Math.hypot(shell.x - enemy.x, shell.y - enemy.y); if (distance < 20) { enemyArrays.splice(j, 1); shellArrays.splice(idx, 1); createParticle(particleNum, enemy.x, enemy.y, enemy.color); score += 10; scoreText.innerHTML = 'Score: ' + score; } }); // 范围判断 if (shell.x <= 0 || shell.x >= canvas.width || shell.y <= 0 || shell.y >= canvas.height) { shellArrays.splice(idx, 1); } }); // 粒子 particleArrays.forEach((particle, idx) => { particle.draw(ctx); particle.update(); if (particle.alpha <= 0.1) { particleArrays.splice(idx, 1); } }); window.requestAnimationFrame(animate); } // 创建粒子 function createParticle(n, x, y, color) { for (let i = 0; i < n; i++) { let vector = { x: Math.random() * 3 - 1.5, y: Math.random() * 3 - 1.5, }; particleArrays.push(new Particle(x, y, 3, color, 1, vector)); } } function handleClick() { window.addEventListener("click", (e) => { let x = e.clientX; let y = e.clientY; let color = "white"; let radius = 10; let radian = Math.atan2(y - player.y, x - player.x); let vector = { x: Math.cos(radian) * 6, y: Math.sin(radian) * 6, }; let shell = new Shell(player.x, player.y, radius, color, vector); shellArrays.push(shell); }) } 子弹和敌人的运动方向是怎么产生的
最新发布
06-02
在生成敌人时，先计算出敌人所在位置和玩家位置的夹角(angle)，然后用 Math.cos 和 Math.sin 函数计算出 x 和 y 方向上的速度分量，最终得到一个向量。这个向量就是敌人的运动方向。在生成子弹时，点击鼠标事件获取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值