[SoOnPerson] HTML5 簡單的動畫

阿新 • • 發佈：2019-01-15

有了第一個粉絲呀！開心！

在學習動畫的時候，有了一點小成果，開心，記錄一下

不過不知道怎麼能發動圖，就不髮結果了

檔案 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動畫基礎碰撞檢測的實現

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

[SoOnPerson] HTML5 簡單的動畫

相關推薦