canvas畫出簡陋版隨鼠標轉動眼睛且會眨眼的可愛櫻桃小丸子

可到我的github上下載文件

需求：

  • 剛加載時鼠標不移動，眼睛會不停地眨眼
  • 眼球會跟隨鼠標移動而移動
  • 鼠標不移動時恢復眨眼效果

?

提示：

  • 除了眼睛是動態以外，其他靜態繪制都在static()函數中
  • 利用橢圓的短軸長度先變短后恢復長度來模擬眨眼睛的效果
  • 眼球隨鼠標移動關鍵在于Math.atan2()，他可以求得鼠標坐標與眼球原點的角度差，利用三角函數即可求得眼球的移動路線
  • 鼠標靜止時觸發眨眼特效，因為鼠標移動會觸發高頻率的onmousemove，需要使用防抖的debounce，即設置最后一次才會觸發眨眼函數

?文件大多都有解釋，而且都是知識都是屬于canvas基礎范圍內哦，就不浪費口舌啦，不過眨眼睛那塊可能有一丟丟難，如果需要的話可以留言，可以幫的話我盡量幫哦，不過相信聰明的你們肯定一看就會啦是吧哈哈哈

?

?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/251399.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/251399.shtml
英文地址，請注明出處：http://en.pswp.cn/news/251399.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

poj 2049（二分+spfa判負環）

poj 2049（二分+spfa判負環）

poj 2049（二分spfa判負環） 給你一堆字符串，若字符串x的后兩個字符和y的前兩個字符相連，那么x可向y連邊。問字符串環的平均最小值是多少。1 ≤ n ≤ 100000，有多組數據。 首先根據套路，二分是顯然的。然后跑…
閱讀更多...
Vue學習筆記（一）—— 什么時候需要import Vue from 'vue'

Vue學習筆記（一）—— 什么時候需要import Vue from 'vue'

一、當執行 import vue from ‘vue’ 時發生了什么？ 其實在 node.js 中，執行 import 就相當于執行了 require，而 require 被調用，就會用到 require.resolve 這個函數來查找包的路徑，而這個函數在 nodejs 中會有一個關于…
閱讀更多...
es6 --- 用promise對象實現Ajax操作的一個實例

es6 --- 用promise對象實現Ajax操作的一個實例

首先回顧一下Ajax請求的步驟 var client new XMLHttpRequest(); client.open("GET", url); client.onreadystatechange handler; client.responseType "json"; client.setRequestHeader("Accept", "application/json"); client.s…
閱讀更多...
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…
閱讀更多...
【深度學習】caffe 中的一些參數介紹

【深度學習】caffe 中的一些參數介紹

一個優秀的算法工程師51%的時間在調參數，48%的時間在測試模型，剩下的1%時間再寫代碼。段子雖然是網上看來的，但調參數是真的心碎。像我這樣的小萌新更是覺得無從下手。只有知己知彼（了解每個參數的含義），才…
閱讀更多...
Vue學習筆記（二）—— vue項目中使用axios

Vue學習筆記（二）—— vue項目中使用axios

一、文檔鏈接 axios文檔 vue開發插件 二、axios 簡介 axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征： 從瀏覽器中創建 XMLHttpRequest 從 node.js 發出 http 請求 支持 Promise API 攔截請求和響應 轉換請求和響應…
閱讀更多...
es6 --- promise.prototype.then的鏈式引用

es6 --- promise.prototype.then的鏈式引用

很多時候,我們需要使用ajax請求獲取數據A.并使用A中的數據A.a來進行下一步的Ajax操作… 下面使用promise.prototype.then的鏈式引用來實現 // 首先封裝一個getJSON的方法. var getJSON function (url) {var promise new Promise(function (resolve, reject) {var client ne…
閱讀更多...
jquery對json 鍵值對或數組的增加、刪除、遍歷操作

jquery對json 鍵值對或數組的增加、刪除、遍歷操作

在前端遍歷json鍵值對或數組遍歷的情況也會經常用到，我們知道在java、c#其它的語言里提供方便的方法來操作，那么在json里面有沒有類似的方法呢，廢話就不多說了上代碼：var jsonStr{}; //增加 jsonStr["name1"]"yu&q…
閱讀更多...
廖雪峰老師Git教程代碼梳理

廖雪峰老師Git教程代碼梳理

建立版本庫 創建一個版本庫非常簡單，首先，選擇一個合適的地方，創建一個空目錄（repository）： $ mkdir learngit //創建learngit目錄 $ cd learngit //切換當前目錄為learngit目錄 $ pwd //用于顯示當…
閱讀更多...
BZOJ2006 [NOI2010]超級鋼琴 【堆 + RMQ】

BZOJ2006 [NOI2010]超級鋼琴 【堆 + RMQ】

2006: [NOI2010]超級鋼琴 Time Limit: 20 Sec Memory Limit: 552 MBSubmit: 3446 Solved: 1692[Submit][Status][Discuss]Description 小Z是一個小有名氣的鋼琴家，最近C博士送給了小Z一架超級鋼琴，小Z希望能夠用這架鋼琴創作出世界上最美妙的音樂。 這…
閱讀更多...
Vue項目代碼改進（六）—— vue的mixins的使用

Vue項目代碼改進（六）—— vue的mixins的使用

混入可以將不同組件的共同內容部分在一個混入對象中展示，然后通過在組件實例中混入這個對象，這樣擁有這些屬性的組件都可以調用 混入對象中的屬性名跟組件中的屬性名沖突時，以組件自身的為基準 舉例：單文件組件users.vue 1&#x…
閱讀更多...
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…
閱讀更多...
最新文章

Copyright @ 2022~2023