canvas动画简单操作

canvas动画

小球滚动效果

关键api：
window.requestAnimationFrame(draw)
会递归调用draw函数，替代setIntervalvar x = 20;
var speed = 4;
//电脑的帧率是1秒钟60Hz， 就相当于一秒钟可以播放60张图片，就相当于播放一张图片使用16.7msfunction draw () {//1. 先把画布清空context.clearRect(0, 0, canvas.width, canvas.height);//2. 画小球context.beginPath();var gradient = context.createRadialGradient(x-10,190,0,x,200,20);gradient.addColorStop(0,'#fff');gradient.addColorStop(1,'#333');context.fillStyle = gradient;context.arc(x, 200, 20, 0, 2*Math.PI);context.fill();//3. x要移动x  = speed;if(x>canvas.width - 20||x<20){speed = -speed;}//被优化过的动画执行方向1.递归调用；2.可以自适应浏览器的刷新的帧率window.requestAnimationFrame(draw);
}
draw();

小球x,y轴回弹效果

关键点：
1.  跟上面例子差不多
2.  在y轴上加多一个speed即可var xspeed = 2;
var yspeed = 2;
//小球的初始位置
var x = 20;
var y = 200;
function draw() {context.clearRect(0, 0, canvas.width, canvas.height);//创建一张新的玻璃纸context.beginPath();var gradient = context.createRadialGradient(x - 10, y-10, 0, x, y, 20);gradient.addColorStop(0, '#fff');gradient.addColorStop(1, '#333');context.fillStyle = gradient;context.arc(x, y, 20, 0, 2*Math.PI);context.fill();x  = xspeed;y  = yspeed;//水平方向到达了边界, 就调头， 速度往反方向if (x < 20 || x > canvas.width - 20) {xspeed = -xspeed;}if (y < 20 || y > canvas.height - 20) {yspeed = -yspeed;}window.requestAnimationFrame(draw);
}
draw();

小鸟挥动翅膀

var birdsImg = new Image();
birdsImg.src = "./img/birds.png";//图片加载完成之后，才开始执行绘制操作
birdsImg.onload = function () {//翅膀扇了第几次var index = 0;//当前是第几张图片var xindex = 0;//每张小鸟图片的宽高var w = birdsImg.width / 3;var h = birdsImg.height;//小鸟的位置var x = 100;var y = 100;//小鸟往下掉的速度var yspeed = 5;function draw() {//使用第几张图片index  = 1;xindex = index % 3;//清空画布context.clearRect(0, 0, canvas.width, canvas.height);//画每一张小鸟context.drawImage(birdsImg, xindex * w, 0, w, h, x, y, w, h);//小鸟往下掉y  = yspeed;//递归调用draw方法，实现动画window.requestAnimationFrame(draw);}draw();
}

地球转动

判断两张图片都加载完成的方法

var sun = new Image();
var earth = new Image();
sun.src = "./img/Canvas_sun.png";
earth.src = "./img/Canvas_earth.png";//计数器
var count = 0;
var images = [sun, earth];//如果需要多个图片都加载完成之后，再操作， 应该怎么办：
images.forEach(function (img) {img.onload = function () {count  = 1;if (count == images.length) {//。。。code}

地球转动

var sun = new Image();
var earth = new Image();
sun.src = "./img/Canvas_sun.png";
earth.src = "./img/Canvas_earth.png";
//计数器
var count = 0;
var images = [sun, earth];
//如果需要多个图片都加载完成之后，再操作， 应该怎么办：
images.forEach(function (img) {img.onload = function () {count  = 1;if (count == images.length) {console.log("所有的图片都加载完成了");function draw() {//0. 先把原始的坐标系的状态保存起来context.save();//1. 清空画布context.clearRect(0, 0, canvas.width, canvas.height);//2. 画太阳(五参模式， 原图显示)context.drawImage(sun, 0, 0, sun.width, sun.height);//3. 假设地球绕太阳一圈的时间是1分钟，只需要拿到当前的秒数，就可以用秒数/60*360计算出地球相于水平线的角度//拿到当前的秒数var now = new Date();//精确到毫秒，就能够形成一个连续的动画效果了var seconds = now.getSeconds();var millSeconds = now.getMilliseconds();seconds  = millSeconds / 1000;//算出此时此刻的地球的角度（弧度）var radian = seconds / 60 * 2 * Math.PI;//4. 平移坐标系，将坐标的原点移到太阳的中心context.translate(sun.width/2, sun.height/2);//5. 旋转坐标系context.rotate(radian);//6. 画地球context.drawImage(earth, 120-earth.width/2, -earth.height/2, earth.width, earth.height);//7. 还原坐标系context.restore();window.requestAnimationFrame(draw);}draw();}}
})


关于save和restore

//save保存， restore恢复， 还原
//save的作用，是把context的当前的状态，保存起来;restore是把context最近一次保存的状态还原context.fillStyle = "red";
context.strokeStyle = "blue";
context.shadowColor = "cyan";//把当前的context整个保存一份
context.save(); //就会把当前的context整个保存一份context.fillRect(100, 100, 100, 100);context.fillStyle = "green";
context.fillRect(300, 200, 100, 100);//把最近保存的那个context直接拿过来用
context.restore();context.fillRect(500, 300, 100, 100);

钟表的实现

//画某一帧的方法
function draw() {//0. 把坐标系的原始状态保存context.save();//1. 清空画布context.clearRect(0, 0, canvas.width, canvas.height);//2. 先平移坐标系到中心点，再旋转坐标系到12点钟的方向context.translate(300, 200);//往反方向旋转90度context.rotate(-0.5*Math.PI);//3. 画表盘context.beginPath();context.arc(0, 0, 130, 0, 2*Math.PI);context.strokeStyle = "blue";context.lineWidth = 3;context.stroke();//4. 画时针的刻度context.beginPath();for (var i = 0; i<12; i  ) {context.moveTo(115, 0);context.lineTo(126, 0);context.rotate(30/180*Math.PI);}context.strokeStyle = "#000";context.lineWidth = 6;context.stroke();//5. 画分针的刻度context.beginPath();for (var i = 0; i<60; i  ) {if (i % 5 != 0) {context.moveTo(120, 0);context.lineTo(126, 0);}context.rotate(6/180*Math.PI);}context.lineWidth = 4;context.stroke();//6. 算出时针， 分针， 秒针的角度var now = new Date();var h = now.getHours();var m = now.getMinutes();var s = now.getSeconds();m = m   s/60; //精确到几点几分钟h = h   m/60; //精确到几点几小时var hradian = h / 12 * 2 * Math.PI;var mradian = m / 60 * 2 * Math.PI;var sradian = s / 60 * 2 * Math.PI;//7. 画时针context.save();context.beginPath();context.rotate(hradian);context.moveTo(-15, 0);context.lineTo(60, 0);context.strokeStyle = "blue";context.lineWidth = 6;context.lineCap = "round";context.stroke();context.restore();//8. 画分针context.save();context.beginPath();context.rotate(mradian);context.moveTo(-15, 0);context.lineTo(70, 0);context.strokeStyle = "blue";context.lineWidth = 5;context.lineCap = "round";context.stroke();context.restore();//9. 画秒针context.save();context.beginPath();context.rotate(sradian);context.moveTo(-15, 0);context.lineTo(85, 0);context.strokeStyle = "red";context.lineWidth = 3;context.lineCap = "round";context.stroke();context.restore();//10. 画表心context.beginPath();context.arc(0, 0, 5, 0, 2*Math.PI);context.fillStyle = "red";context.fill();//11. 还原坐标系context.restore();
}//draw();//没有必要使用requestAnimationFrame,因为这个钟表是一秒钟走一次
setInterval(draw, 1000);

更多专业前端知识，请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/361355.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用PrimeFaces开发数据导出实用程序

使用PrimeFaces开发数据导出实用程序

我的日常工作涉及大量使用数据。 我们使用关系数据库来存储所有内容&#xff0c;因为我们依赖于企业级的数据管理。 有时&#xff0c;具有将数据提取为简单格式&#xff08;例如电子表格&#xff09;的功能很有用&#xff0c;以便我们可以按需进行操作。 这篇文章概述了我使用P…
阅读更多...
Tomcat到Wildfly：配置数据库连接

Tomcat到Wildfly：配置数据库连接

此摘录摘自《 从Tomcat到WildFly 》一书&#xff0c;您将在其中学习如何将现有的Tomcat体系结构移植到WildFly&#xff0c;包括服务器配置和在其顶部运行的应用程序。 WildFly是完全兼容的Java Enterprise Edition 7容器&#xff0c;与Tomcat相比&#xff0c;它具有更多的可用…
阅读更多...
在jOOQ之上构建的RESTful JDBC HTTP服务器

在jOOQ之上构建的RESTful JDBC HTTP服务器

jOOQ生态系统和社区正在持续增长。 我们个人总是很高兴看到基于jOOQ构建的其他开源项目。 今天&#xff0c;我们非常高兴为您介绍BjrnHarrtell结合REST和RDBMS的一种非常有趣的方法。 BjrnHarrtell从小就是瑞典的程序员。 他通常在Sweco Position AB上忙于编写GIS系统和集成&a…
阅读更多...
node.js 搭建http调取 mysql数据库中的值

node.js 搭建http调取 mysql数据库中的值

首先&#xff0c;我们先在数据库中创建两个表t_news,t_news_type;插入数据&#xff1a; 然后我们再写代码&#xff1a; //加载模块express var express require("express"); var fs require("fs"); //加载路径 var url require("url"); //加…
阅读更多...
NHibernate.3.0.Cookbook第三章第9节的翻译

NHibernate.3.0.Cookbook第三章第9节的翻译

Using stateless sessions 使用无状态会话 当进行大量数据处理的时候,可能会放弃使用一些高级特性,而使用更接近底层的API来提高性能.在NHibernate中,这种高性能的底层API就是无状态的会话.本节介绍如何使用无状态会话来更新movie对象的价格. 准备 使用第一章的Eg.Core和第二章…
阅读更多...
致电以验证您的JavaFX UI的响应能力

致电以验证您的JavaFX UI的响应能力

最近&#xff0c;Jim Weaver在他的Surface Pro上为演示安装了我的小图片索引应用“ picmodo”&#xff0c;并且GUI变成了垃圾。 显然&#xff0c;Windows Tablet上JavaFX的基本字体大小很高&#xff1a; 我认为&#xff0c;即使调整大小行为和预期一样工作&#xff0c;UI也绝…
阅读更多...
vuex 管理vue-router的传值

vuex 管理vue-router的传值

假设有这样的一种情况&#xff0c;在两个组件中。一个组件【A】主要是比如说放表格数据&#xff0c;而另外一个组件【B】是专门用来向组件A的表格添加数据的表单。这个时候就是两个兄弟组件之间传递数据了。首先想到的是使用兄弟组件传递数据的方法&#xff1a; 新建一个中间件…
阅读更多...
c++ 错误处理

c++ 错误处理

void __fastcall TForm1::Button1Click(TObject *Sender) { try { int iEdit1->Text.ToInt(); Edit1->TextAnsiString(10/i); } catch (...) { ShowMessage("Error"); } } 通过 为知笔记 发布转载于:https://www.cnblogs.com/xe2011/archive/2012/07/16/55298e…
阅读更多...
前后端分手大师——MVVM 模式

前后端分手大师——MVVM 模式

阅读目录简而言之组成部分没有什么是一个栗子不能解决的简而言之 之前对 MVVM 模式一直只是模模糊糊的认识&#xff0c;正所谓没有实践就没有发言权&#xff0c;通过这两年对 Vue 框架的深入学习和项目实践&#xff0c;终于可以装B了有了拨开云雾见月明的感觉。 Model–View–…
阅读更多...
Java性能调优调查结果（第三部分）

Java性能调优调查结果（第三部分）

这是该系列文章的第三篇&#xff0c;我们将分析2014年10月进行的调查的结果。如果您尚未这样做&#xff0c;我建议从该系列的前两篇文章开始&#xff1a; 问题严重性分析和监视域分析 。 这篇文章着重于故障排除/根本原因检测。 本调查部分的背景&#xff1a;意识到性能问题并…
阅读更多...
划分树

划分树

昨天的杭电多校联合训练热身赛的一道题&#xff0c;求区间的中位数&#xff0c;快排会超时&#xff0c;划分树的模版题。。 划分树是一种基于线段树的数据结构。主要用于快速求出(在log(n)的时间复杂度内&#xff09;序列区间的第k大值 。划分树和归并树都是用线段树作为辅助的…
阅读更多...
Canvas事件绑定

Canvas事件绑定

canvas事件绑定 众所周知canvas是位图&#xff0c;在位图里我们可以在里面画各种东西&#xff0c;可以是图片&#xff0c;可以是线条等等。那我们想给canvas里的某一张图片添加一个点击事件该怎么做到。而js只能监听到canvas的事件&#xff0c;很明显这个图片是不存在与dom里面…
阅读更多...
控件注册 - 利用资源文件将dll、ocx打包进exe文件（转）

控件注册 - 利用资源文件将dll、ocx打包进exe文件（转）

很多时候自定义或者引用控件都需要注册才能使用&#xff0c;但是如何使要注册的dll或ocx打包到exe中&#xff0c;使用户下载以后看到的只是一个exe,点击直接运行呢&#xff1f;就像很多安全控件&#xff0c;如支付宝的aliedit.exe那样。 现在介绍一种使用资源文件&#xff0c;将…
阅读更多...
Canvas-图片旋转

Canvas-图片旋转

Canvas-图片旋转 众所周知canvas是位图&#xff0c;你可以在里面渲染你要的东西&#xff0c;不过你只能操作canvas的属性来进行编辑。就是说你并不能操作画进canvas的东西&#xff0c;例如我在canvas里添加一幅画&#xff0c;我现在想将那幅画移动10px&#xff0c;我们并不能直…
阅读更多...
CSS3实现多页签图片缩放切换效果

CSS3实现多页签图片缩放切换效果

多页签切换效果&#xff0c;图片缩放&#xff0c;鼠标移动到图片上后显示文字内容等等&#xff0c;效果很集中呐 截图如下&#xff1a; 下载地址&#xff1a;http://www.lanrenzhijia.com/js/css3/2012/0718/602.html 预览地址&#xff1a;http://www.lanrenzhijia.com/yulan/2…
阅读更多...
Angular使用总结 --- 如何正确的操作DOM

Angular使用总结 --- 如何正确的操作DOM

无奈接手了一个旧项目&#xff0c;上一个老哥在Angular项目中大量使用了JQuery来操作DOM&#xff0c;真的是太不讲究了。那么如何优雅的使用Angular的方式来操作DOM呢&#xff1f; 获取元素 1、ElementRef --- A wrapper around a native element inside of a View. 在组件…
阅读更多...
非首屏图片延时加载

非首屏图片延时加载

目标 减少资源加载可以明显的优化页面加载的速度&#xff0c;所以可以减少页面载入时立即下载的图片的数量&#xff0c;以提高页面加载速度&#xff0c;其他的图片在需要的时候再进行加载。 思路 想要实现以上的目标&#xff0c;有几个地方需要思考。 1、如何判断哪些图片需要…
阅读更多...
具有链接资源的Spring RestTemplate

具有链接资源的Spring RestTemplate

Spring Data REST是一个了不起的项目&#xff0c;它提供了一些机制来将基于Spring Data的存储库中的资源公开为REST资源。 使用链接资源公开服务 考虑两个简单的基于JPA的实体&#xff0c;课程和教师&#xff1a; Entity Table(name "teachers") public class Tea…
阅读更多...
用户会话，数据控件和AM池

用户会话，数据控件和AM池

最近&#xff0c;有人问我有关应用程序模块池的有趣问题。 众所周知&#xff0c;AM池包含用户会话引用的应用程序模块实例&#xff0c;这允许会话在后续请求时从池中获取完全相同的AM实例。 如果应用程序中有多个根应用程序模块&#xff0c;那么每个模块都将拥有自己的AM池&am…
阅读更多...
用 CSS 实现元素垂直居中，有哪些好的方案？

用 CSS 实现元素垂直居中，有哪些好的方案？

DIV居中的经典方法 1. 实现DIV水平居中 设置DIV的宽高&#xff0c;使用margin设置边距0 auto&#xff0c;CSS自动算出左右边距&#xff0c;使得DIV居中。 1 div{ 2 width: 100px; 3 height: 100px; 4 margin: 0 auto; 5 } 缺点&#xff1a;需要设置div的宽度 2.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023