canvas实现圆周运动

2024-04-10 13:03| 来源: 网络整理| 查看: 265

一、前言

本篇博客将会介绍在cnavas中实现圆周运动的2种方法，学习的前提是懂得基本的canvas绘画与动画实现。 canvas基本绘画教程：canvas入门基础系列 by TG_w3cschool https://www.w3cschool.cn/kqjhm/ canvas基本动画原理：canvas动画包教不包会 by TG_w3cschool https://www.w3cschool.cn/xjmuw/

二、实现过程

第一种方法（坐标）：利用坐标和三角函数来实现圆周运动。

先编写基本canvas骨架： canvas实现圆周运动 *{ margin: 0; padding: 0; } #myCanvas{ border: 1px solid black;/*给画布一个边框*/ } let canvas; let cxt; window.onload = ()=>{ canvas = document.getElementById("myCanvas"); cxt = canvas.getContext("2d"); } 编写函数draw1: function draw1(){ cxt.translate(250,250);//原点移动到画布中央 cxt.beginPath();//开始绘画 cxt.arc(0,0,5,0,2*Math.PI,true);//画原点 cxt.fill();//填充 cxt.closePath();//结束绘画 }

得到图像如下：在这里插入图片描述我们的目的是实现圆周运动，这里先讲一下原理一个点在圆周上的运动，其横坐标与纵坐标分别满足cos函数与sin函数。设一个不断增大的数t，t在每一次调用函数时自增则做圆周运动的物体中心： x（横坐标）= 圆心横坐标+cos(t) × 半径 y（纵坐标）= 圆心纵坐标+sin(t) × 半径由此我们可以完成draw1函数（通过回调自身来实现动画）：

let t = 0; let radius = 100;//设置圆周半径 let x, y; function draw1(){ cxt.clearRect(0,0,500,500);//清空画布 cxt.save();//保存之前的状态 cxt.translate(250,250);//原点移动到画布中央 cxt.beginPath();//开始绘画 cxt.arc(0,0,5,0,2*Math.PI,true);//画原点 cxt.fill();//填充 cxt.closePath();//结束绘画 t += 0.05;//t自增（不怡过大） x = 0 + Math.cos(t) * radius;//确定坐标（此处圆心即是原点） y = 0 + Math.sin(t) * radius;//确定坐标（此处圆心即是原点） cxt.beginPath(); cxt.arc(x,y,20,0,2*Math.PI,true);//绘画做圆周运动的圆 cxt.fill();//填充 cxt.closePath(); cxt.restore();//回到未改变坐标的状态 requestAnimationFrame(draw1);//根据浏览器刷新频率回调函数本身 }

这样调用函数后便可实现一个圆绕原点进行圆周运动：在这里插入图片描述第二种实现方法（角度）：利用角度变化来实现圆周运动

先编写基本canvas骨架：跟上边一致编写函数draw2： function draw2(){ cxt.translate(250,250);//原点移动到画布中央 cxt.beginPath();//开始绘画 cxt.arc(0,0,5,0,2*Math.PI,true);//画原点 cxt.fill();//填充 cxt.closePath();//结束绘画 }

跟之前一样，画个原点：在这里插入图片描述角度实现圆周运动，做圆周运动的物体坐标不改变，改变的是整个坐标系的方向，角度可随时间的变化而变化：（这里60可以改为6、600、6000…旋转速度会随之改变） angle = 秒数（1~60）× （2 × 圆周率 / 60）这样便可以在一分钟转动一周。 draw2函数代码如下：

let angle; function draw2(){ cxt.clearRect(0,0,500,500);//清空画布 cxt.save();//保存之前的状态 cxt.translate(250,250);//原点移动到画布中央 cxt.beginPath();//开始绘画 cxt.arc(0,0,5,0,2*Math.PI,true);//画原点 cxt.fill();//填充 cxt.closePath();//结束绘画 cxt.beginPath(); let time = new Date(); angle = 2 * Math.PI / 60 * time.getSeconds();//设置角度 cxt.rotate(angle);//根据时间改变角度 cxt.arc(100,0,20,0,2*Math.PI,true);//绘画做圆周运动的圆 cxt.fill();//填充 cxt.closePath(); cxt.restore();//回到未改变坐标的状态 requestAnimationFrame(draw2);//根据浏览器刷新频率回调函数本身 }

圆周运动是实现了，但我们会发现一个问题，外边的圆在做圆周运动的时候，会像时钟的秒针一样，每秒移动一个较大的角度，导致圆周的动画看起来一顿一顿的。在这里插入图片描述这个问题我们可以使用毫秒来解决，不够一秒的时候，靠毫秒来改变角度，毫秒改变的角度正好是下一秒开始的角度，这样动画看起来就很平滑：（毫秒数到1000后角度要与下一秒一致） angle = 秒数（1~60）× （2 × 圆周率 / 60）+ 毫秒数（1 ~1000） × （2 × 圆周率 / 60000）这样便可以平滑实现圆周运动。 draw2函数代码如下：

let angle; function draw2(){ cxt.clearRect(0,0,500,500);//清空画布 cxt.save();//保存之前的状态 cxt.translate(250,250);//原点移动到画布中央 cxt.beginPath();//开始绘画 cxt.arc(0,0,5,0,2*Math.PI,true);//画原点 cxt.fill();//填充 cxt.closePath();//结束绘画 cxt.beginPath(); let time = new Date(); angle = 2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds();//设置角度 cxt.rotate(angle);//根据时间改变角度 cxt.arc(100,0,20,0,2*Math.PI,true);//绘画做圆周运动的圆 cxt.fill();//填充 cxt.closePath(); cxt.restore();//回到未改变坐标的状态 requestAnimationFrame(draw2);//根据浏览器刷新频率回调函数本身 }

这样便实现了平滑的圆周运动。在这里插入图片描述

三、网页代码

坐标实现：

canvas实现圆周运动 *{ margin: 0; padding: 0; } #myCanvas{ border: 1px solid black;/*给画布一个边框*/ } let canvas; let cxt; window.onload = ()=>{ canvas = document.getElementById("myCanvas"); cxt = canvas.getContext("2d"); draw1(); } let t = 0; let radius = 100;//设置圆周半径 let x, y; function draw1(){ cxt.clearRect(0,0,500,500);//清空画布 cxt.save();//保存之前的状态 cxt.translate(250,250);//原点移动到画布中央 cxt.beginPath();//开始绘画 cxt.arc(0,0,5,0,2*Math.PI,true);//画原点 cxt.fill();//填充 cxt.closePath();//结束绘画 t += 0.05;//t自增（不怡过大） x = 0 + Math.cos(t) * radius;//确定坐标（此处圆心即是原点） y = 0 + Math.sin(t) * radius;//确定坐标（此处圆心即是原点） cxt.beginPath(); cxt.arc(x,y,20,0,2*Math.PI,true);//绘画做圆周运动的圆 cxt.fill();//填充 cxt.closePath(); cxt.restore();//回到未改变坐标的状态 requestAnimationFrame(draw1);//根据浏览器刷新频率回调函数本身 }

角度实现：

canvas实现圆周运动 *{ margin: 0; padding: 0; } #myCanvas{ border: 1px solid black;/*给画布一个边框*/ } let canvas; let cxt; window.onload = ()=>{ canvas = document.getElementById("myCanvas"); cxt = canvas.getContext("2d"); draw2(); } let angle; function draw2(){ cxt.clearRect(0,0,500,500);//清空画布 cxt.save();//保存之前的状态 cxt.translate(250,250);//原点移动到画布中央 cxt.beginPath();//开始绘画 cxt.arc(0,0,5,0,2*Math.PI,true);//画原点 cxt.fill();//填充 cxt.closePath();//结束绘画 cxt.beginPath(); let time = new Date(); angle = 2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds();//设置角度 cxt.rotate(angle);//根据时间改变角度 cxt.arc(100,0,20,0,2*Math.PI,true);//绘画做圆周运动的圆 cxt.fill();//填充 cxt.closePath(); cxt.restore();//回到未改变坐标的状态 requestAnimationFrame(draw2);//根据浏览器刷新频率回调函数本身 }

有不足之处，请各位提醒一下！

【本文地址】

公司简介

联系我们