canvas画出简陋版随鼠标转动眼睛且会眨眼的可爱樱桃小丸子

可到我的github上下载文件

需求：

  • 刚加载时鼠标不移动，眼睛会不停地眨眼
  • 眼球会跟随鼠标移动而移动
  • 鼠标不移动时恢复眨眼效果

 

提示：

  • 除了眼睛是动态以外，其他静态绘制都在static()函数中
  • 利用椭圆的短轴长度先变短后恢复长度来模拟眨眼睛的效果
  • 眼球随鼠标移动关键在于Math.atan2()，他可以求得鼠标坐标与眼球原点的角度差，利用三角函数即可求得眼球的移动路线
  • 鼠标静止时触发眨眼特效，因为鼠标移动会触发高频率的onmousemove，需要使用防抖的debounce，即设置最后一次才会触发眨眼函数

 文件大多都有解释，而且都是知识都是属于canvas基础范围内哦，就不浪费口舌啦，不过眨眼睛那块可能有一丢丢难，如果需要的话可以留言，可以帮的话我尽量帮哦，不过相信聪明的你们肯定一看就会啦是吧哈哈哈

 

 

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

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

相关文章

Windows 64 位 mysql 5.7以上版本包解压中没有data目录和my-default.ini以及服务无法启动的解决办法以及修改初始密码的方法...

Windows 64 位 mysql 5.7以上版本包解压中没有data目录和my-default.ini以及服务无法启动的解决办法以及修改初始密码的方法...

LZ初学SQL，本来以为开源的安装很简单，但是中间出现了一些问题，记录下来，希望能帮助到他人。 mysql官网下载地址：https://dev.mysql.com/downloads/mysql/点击打开链接 以5.7.20版本为例 首先安装包解压后，没…
阅读更多...
总结 构造函数与非构造函数 原型继承的一个方法

总结 构造函数与非构造函数 原型继承的一个方法

这两天真的一直在看原型以及继承之间的千丝万缕，哇，收获颇多，不过所谓温故知新，还是要多复习复习知识点，才能察觉那些之前不易发现的小小sparkle 真心推荐MDN文档——对象原型，JavaScript 中的继承&#x…
阅读更多...
Vue学习笔记（二）—— vue项目中使用axios

Vue学习笔记（二）—— vue项目中使用axios

一、文档链接 axios文档 vue开发插件 二、axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应…
阅读更多...
jquery对json 键值对或数组的增加、删除、遍历操作

jquery对json 键值对或数组的增加、删除、遍历操作

在前端遍历json键值对或数组遍历的情况也会经常用到，我们知道在java、c#其它的语言里提供方便的方法来操作，那么在json里面有没有类似的方法呢，废话就不多说了上代码：var jsonStr{}; //增加 jsonStr["name1"]"yu&q…
阅读更多...
廖雪峰老师Git教程代码梳理

廖雪峰老师Git教程代码梳理

建立版本库 创建一个版本库非常简单，首先，选择一个合适的地方，创建一个空目录（repository）： $ mkdir learngit //创建learngit目录 $ cd learngit //切换当前目录为learngit目录 $ pwd //用于显示当…
阅读更多...
es6 --- Promise.catch

es6 --- Promise.catch

Promise.prototype.catch(): 是.then(null, rejection)的别名,用于指定发生错误时的回调函数 p.then( (val) -> console.log(fulfilled:, val)).catch( (err) > console.log(rejected, err));// 等同于 p.then( (val) > console.log(fulfilled:, val)).then(null, (e…
阅读更多...
爬虫的一些工具(二)

爬虫的一些工具(二)

爬虫的一些工具(二) 1. 常有的工具 (1). python(2). pycharm(3).浏览器i.chromeii.火狐(4).fiddler的使用2 fiddler的使用 (1).操作界面(2)界面含义请求(Request)部分详解名称含义Headers显示客户端发送到服务器的 HTTP 请求的,header 显示为一个分级视图，包含了 We…
阅读更多...
微信开发者工具一打开代码编辑区文件全部不见了

微信开发者工具一打开代码编辑区文件全部不见了

今天开微信开发者工具时，一打开竟然文件全部不见了！然后页面也编译不出来，搜了一下大神们的建议： 1、在编辑器控制台输入：openVendor 回车 会打开一个文件夹：C:\Users\Administrator\AppData\Local\微信we…
阅读更多...
vue项目中所使用的element-UI / echarts

vue项目中所使用的element-UI / echarts

高清版思维导图见后台管理项目地址 1.login登录页面 < el-form >表单 在 Form 组件中&#xff0c;每一个表单域由一个 Form-Item 组件构成&#xff0c;表单域中可以放置各种类型的表单控件&#xff0c;包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimeP…
阅读更多...
es6 --- 使用yield*命令遍历完全二叉树

es6 --- 使用yield*命令遍历完全二叉树

首先定义二叉树的结构: // 定义二叉树的结构 function Tree(left, label, right) {this.left left;this.label label;this.right right; }// 对二叉树采用中序遍历 function* inorder(t) {if(t) {yield* inorder(t.left);yield t.label;yield* inorder(t.right);} }// 生成…
阅读更多...
面向对象之继承与派生

面向对象之继承与派生

阅读目录 一 初识继承二 继承与抽象&#xff08;先抽象再继承&#xff09;三 继承与重用性四 派生五 组合与重用性六 接口与归一化设计七 抽象类八 继承实现的原理&#xff08;可恶的菱形问题&#xff09;九 子类中调用父类的方法一 初识继承 什么是继承 继承是一种创建新类的方…
阅读更多...
SpringBoot（十三）-- 不同环境下读取不同配置

SpringBoot（十三）-- 不同环境下读取不同配置

一、场景&#xff1a; 在开发过程中 会使用 开发的一套数据库&#xff0c;测试的时候 又会使用测试的数据库&#xff0c;生产环境中 又会切换到生产环境中。常用的方式是 注释掉一些配置&#xff0c;然后释放一下配置。SpringBoot提供了在不同环境下切换不同配置的功能&#xf…
阅读更多...
MDN文档基础知识搜集

MDN文档基础知识搜集

Array数组&#xff0c;一种允许你存储多个值在一个引用里的结构。var myVariable [1,Bob,Steve,10]; 引用数组的元素只需&#xff1a;myVariable[0], myVariable[1], 等等. 发布工具: FTP 客户端 你还需要一种将文件从本地硬盘上传到远程Web服务器的方法。 为了做到这一点&am…
阅读更多...
vue-cli生成项目时你应当知道的

vue-cli生成项目时你应当知道的

一、安装 npm install -g vue-cli二、创建项目 vue init 模板名 项目名 vue init webpack mymall模板名: 1 . webpack 最常用 2 . webpack-simple // 一个简单webpackvue-loader的模板&#xff0c;不包含其他功能。 3 . browserify // 一个全面的Browserifyvueify 的模板&am…
阅读更多...
es6 --- 正确获取Generator函数内部的this对象使其可以使用new

es6 --- 正确获取Generator函数内部的this对象使其可以使用new

首先看2个例子 function * g() {this.a 11; }let o g(); console.log(o.a);可以看见Generator函数里面的this指向的对象取不出来. 再看下一个例子: function* F() {yield this.x 2;yield this.y 3; } new F();可以看出Generator函数无法使用new操作符, 下面一共一个解决…
阅读更多...
mysql三-3:完整性约束

mysql三-3:完整性约束

阅读目录 一 介绍二 not null与default三 unique四 primary key五 auto_increment六 foreign key七 作业一 介绍 约束条件与数据类型的宽度一样&#xff0c;都是可选参数 作用&#xff1a;用于保证数据的完整性和一致性主要分为&#xff1a; PRIMARY KEY (PK) 标识该字段为该…
阅读更多...
es6 --- 对任意对象部署可遍历接口

es6 --- 对任意对象部署可遍历接口

有时候需要对对象进行遍历,下面提供一个比较方便的接口, 其基本思路是,首先得到对象的所有键(key), 然后将其放在yield* 后面. yield* 可以通过 for … of … 循环遍历 具体实现如下: function* iterEntries (obj) {let keys Object.keys(obj);for ( let i 0; i < keys.…
阅读更多...
element-ui表单验证：用户名、密码、电话、邮箱

element-ui表单验证：用户名、密码、电话、邮箱

之前设计login组件时增加了简单的表单验证&#xff0c;因此对应的users组件&#xff0c;添加用户功能也必须设置相应的验证规则。 文档form表单验证只提供了用户名/密码&#xff0c;是否必须/长度限制的验证。对于电话、邮箱和地址的验证如下&#xff1a; html部分&#xff0c…
阅读更多...
前端解析返回的对象时json显示$ref问题的解决

前端解析返回的对象时json显示$ref问题的解决

在mapper中写的语句&#xff0c;结果集中association&#xff0c;采用的一个对象&#xff0c;整个list列表中每个元素有一个对象元素&#xff0c;如果第二个元素中有一个与第一个元素中对象同名的&#xff0c;就会去引用上一个元素的地址&#xff0c;在json前台解析的时候就不会…
阅读更多...
微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类

微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类

可到我的github账号上去copy文件 先展示一下我实现了的功能吧 提示&#xff0c;如果有出现无法加载域名之类问题的的&#xff0c;可以在“设置”-“项目设置”-打钩“不校验合法域名……”&#xff1b; 或者直接登录自己的微信小程序后台设置域名信息 首页部分&#xff1a; 1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023