[SoOnPerson] HTML5 簡單的動畫
有了第一個粉絲呀!開心!
在學習動畫的時候,有了一點小成果,開心,記錄一下
不過不知道怎麼能發動圖,就不髮結果了
檔案 html5.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動畫</title> <script src="../../js/jquery.js"></script> <script src="../../js/html5.js"></script><style> canvas { width: 19px; height: 9.3px; position:relative; background: linear-gradient( rgba(255,0,0,0.3), rgba(233, 219, 36, 0.3), rgba(255, 252, 60, 0.3), rgba(0,255,0,0.3), rgba(0,255,255,0.3), rgba(0,0,255,0.3), rgba(128,0,255,0.3)); transition: width 5s, height 5s, transform 5s; -webkit-transition: width 5s, height 5s, transform 5s; } canvas:hover { width:1900px; height: 930px; } </style> </head> <body onload="drawBackground();"> <canvas id="background_canvas"></canvas> </body> </html>
這個是邊學邊嘗試做出來的
如果不想要背景慢慢放大,可以不設定canvas裡面的height和width,刪了就可以
background的顏色是彩虹的幾個顏色:紅橙黃綠青藍紫,都設定了透明度,不然感覺不太好看
html5.js自己注意一下引用路徑,還有要在前面引用jquery.js
//螢幕的高度 var sc_height = screen.availHeight-110; //螢幕的寬度 var sc_width = screen.availWidth-20; var Mouse_x = 0; var Mouse_y = 0; //獲取滑鼠座標 function mouseMove(ev) { Ev= ev || window.event; var mousePos = mouseCoords(ev); Mouse_x = mousePos.x; Mouse_y = mousePos.y; } function mouseCoords(ev) { if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return{ x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = mouseMove; //設定背景 function drawBackground() { var cav = $("#background_canvas") ; //設定style裡的寬高 cav.css({"height": sc_height, "width": sc_width, "margin": 0}); //設定屬性寬高,這個不設定的話,圖案會很模糊 cav.attr("width",sc_width); cav.attr("height",sc_height); var cv = document.getElementById("background_canvas"); var context = cv.getContext('2d'); drawCircle(context); } //畫圓 function drawCircle(context) { var t =1 ; var i = 0 ; var circle_speed = 6; window.setInterval(function () { context.clearRect(0,0,sc_width,sc_height); context.beginPath(); //圓的邊的寬度 context.lineWidth = 8; //圓的邊的顏色 context.strokeStyle = 'red'; context.arc(Mouse_x-10, Mouse_y-10, 50, ((circle_speed*i)-10)*Math.PI/180, circle_speed*i*Math.PI/180); context.stroke(); i++; },t); }
螢幕的寬度,有點問題,自己調了一點
主要思想就是獲取一下滑鼠的座標,然後,一直重新整理畫一定角度的圓
主要是
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;開始的角度和結束的角度,我設定的相差了10度,然後每重新整理一次,就角度加一點。要注意是角度,不是數字,所以取了Math.PI/180 這個是一度,相當於單位啦
大概就這麼多啦,畫圓,可以看前面幾個文章,有詳細點的解釋。
大概就是這個一直在轉圈圈,隨著你的滑鼠動。
相關推薦
[SoOnPerson] HTML5 簡單的動畫
有了第一個粉絲呀!開心!在學習動畫的時候,有了一點小成果,開心,記錄一下不過不知道怎麼能發動圖,就不髮結果了檔案 html5.html<!DOCTYPE html> <html lang="en"> <head> <meta
HTML5 Cavans(10) 簡單動畫:擺動
<!DOCTYPE html > <html> <head> <title></title> <script type="text/javascript"> wind
簡單動畫
var red ntb ctype fun tin ole display 測試 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
[js高手之路]html5 canvas動畫教程 - 自己動手做一個類似windows的畫圖軟件
箭頭 erb 寬度 pow(x type row center shape htm 這個繪圖工具,我還沒有做完,不過已經實現了總架構,以及常見的簡易圖形繪制功能: 1,可以繪制直線,圓,矩形,正多邊形【已完成】 2,填充顏色和描邊顏色的選擇【已完成】 3,描邊和填充功
html5 canvas動畫教程 - 自己動手做一個類似windows的畫圖軟件
.cn pic 箭頭 uid .com 教程 amp 設置 一個 制直線,圓,矩形,正多邊形【已完成】 2,填充顏色和描邊顏色的選擇【已完成】 3,描邊和填充功能的選擇【已完成】 後續版本: 橡皮擦,坐標系,線形設置,箭頭,其他流程圖形,裁剪與調整圖形。。。。。 終極目標:
css簡單動畫
iter div cti 不重復 .cn 時間 跟著 移動 路徑 這幾天公司需要更新一個移動端web的頁面,因為任務簡單,就交給作為菜鳥新人的我來做。第一次接觸css還是在14年剛上大一的時候跟著html一起學習的,之後就再也沒有接觸過。所以只好一邊學習,一邊
JQ 簡單動畫顯示隱藏效果
utf-8 border head ack ext char body toggle pad 一、概括 jq的顯示隱藏動畫總共有: 普通顯示隱藏效果主要用了hide、show、toggle 淡入淡出主要用到了fadeIn、fadeOut、fadeToggle 滑動效果主要用
棋盤覆蓋問題簡單動畫演示JAVA
opera ane temp span tcl edi ddt mov name import javax.swing.event.TableModelListener; import javax.swing.table.TableModel; public class
(一)簡單動畫控制播放
很久之前講述過animation動畫播放https://www.cnblogs.com/llstart-new0201/p/7294373.html,現在研究一下animator (一)Project檢視新建AnimatorController (二)在上述介面右鍵Create state->E
JQuery簡單動畫效果演示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <met
7款讓人驚歎的HTML5粒子動畫特效
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
Animate教學課件製作、HTML5網頁動畫製作
最近幾年隨著HTML5的興起,複雜的HTML5動畫,甚至是互動動畫型別的產品不斷湧現,尤其在課件產品方面,很多公司都有相關需求,最近很多HTML5開發工程師想了解相關方面的技術。 針對HTML5,如果是簡單的動畫效果,可以考慮css3來實現,如果是較為複雜的動畫效果,比如有很多特效,動畫時長比較
IOS多媒體-簡單動畫
import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoa
Html5 Canvas動畫基礎(碰撞檢測)
在Canvas中進行碰撞檢測,大家往往直接採用遊戲引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)內建的碰撞檢測功能,好奇的你有思考過它們的內部執行機制嗎?下面將針對基本的碰撞檢測技術進行講解: 1、基於矩形的碰撞檢測 所謂碰撞檢測就是判斷物體間是否發生重疊,這裡我們假設討論的碰撞體都是矩
Html5 Canvas動畫基礎碰撞檢測的實現
在Canvas中進行碰撞檢測,大家往往直接採用遊戲引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)內建的碰撞檢測功能,好奇的你有思考過它們的內部執行機制嗎?下面將針對基本的碰撞檢測技術進行講解: 1、基於矩形的碰撞檢測 所謂碰撞檢測就是判斷物體間是否發生重疊,這裡我們假設討論的碰撞體都是矩
HTML5 簡單歸納 -- 前端知識 (二)
HTML5 全屏事件 全屏事件:requestFullScreen 關閉全屏:cancelFullScreen 判斷是否全屏:fullScreenElement 注意:現各大主流瀏覽器中由於核心不同的原因,會出現不相容的問題,為了讓自己的程式碼能在各大主流瀏覽器中都能正常執行,所以我們在
Android 簡單動畫
public class MainActivity extends AppCompatActivity { private ImageView iv; @Override protected void onCreate(Bundle savedInstance
java簡單動畫效果的實現(2)
簡單的java隨機數 java兩種隨機數生成方式(均為偽隨機): 1.Math.random() 生成0-1之間的隨機數,取0不取1; 2. Random ra=new Random(x); int result=ra.nextInt(y); x是種子,給的
HTML5簡單概述
HTML5 是繼 HTML4.01 和 XHTML1.0 之後的超文字標記語言的最新版本。它是由一群 自由思想者組成的團隊設計出來,並最終實現多媒體支援、互動性、更加智慧的表單,以及 更好 的語義化標記。 HTML5 並不僅僅是 HTML 規範的最新版本,而是一系列用來製作現
html5 簡單例項原始碼
原始碼下載: html5檔案佈局結構 html5檔案佈局結構html5語言標記 瀏覽器執行效果 html5檔案原始碼 <!DOCTYPE html> <html> <head> <meta chars