基于HTMLl5 Canvas實現鼠標跟隨炫彩小動畫

簡介

標簽定義圖形，比如圖表和其他圖像，您必須使用腳本來繪制圖形。在畫布上（Canvas）畫一個紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。

是 HTML5 新增的，一個可以使用腳本(通常為javaScript)在其中繪制圖像的 HTML 元素。它可以用來制作照片集或者制作簡單(也不是那么簡單)的動畫，甚至可以進行實時視頻處理和渲染。?它最初由蘋果內部使用自己MacOS X WebKit推出，供應用程序使用像儀表盤的構件和 Safari 瀏覽器使用。 后來，有人通過Gecko內核的瀏覽器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本網絡應用技術工作組建議為下一代的網絡技術使用該元素。

Canvas是由HTML代碼配合高度和寬度屬性而定義出的可繪制區域。javaScript代碼可以訪問該區域，類似于其他通用的二維API，通過一套完整的繪圖函數來動態生成圖形。

基本使用

看起來和標簽一樣，只是 只有兩個可選的屬性 width、heigth 屬性，而沒有 src、alt 屬性。?如果不給設置widht、height屬性時，則默認 width為300、height為150,單位都是px。也可以使用css屬性來設置寬高，但是如寬高屬性和初始比例不一致，他會出現扭曲。所以，建議永遠不要使用css屬性來設置的寬高。

了解了的用途和原理，這里我們熱身一下，直接用在畫布上繪制一個高 30px 的空心文字，請看下面！

完整代碼：使用 canvas 繪制文本

您的瀏覽器不支持 HTML5 canvas 標簽。

接下來就要基于HTMLl5 ?Canvas實現鼠標跟隨炫彩小動畫：

這是html/css部分

先來說說js部分

首先? 獲取畫布

let canvas = document.querySelector('#canvas');

然后定義寬高

canvas.width = window.innerWidth canvas.height = window.innerHeight

定義為2d,circular為圓

let circular = canvas.getContext('2d');

定義數組存取增加的圓

let CirArr = []

定義構造函數

function Cir(obj) { for (let prop in obj) { this[prop] = obj[prop] } this.dotX = Math.random() * 12 - 7 this.dotY = Math.random() * 12 - 7 this.color = "rgb(" + (parseInt(Math.random() * 200) + 9) + "," + (parseInt(Math.random() * 230) + 18) + ",150)"; }

圓的操作

CirArr.push(this) // 繪制圓 Cir.prototype.addCir = function() { // 開始路徑繪制 circular.beginPath() // 畫圓 circular.arc(this.x, this.y, this.r, 0, Math.PI*2) circular.fillStyle = this.color circular.fill() } Cir.prototype.ani = function() { this.x += this.dotX this.y += this.dotY this.r-- if (this.r <= 0) { // 清除r小于0的圓 for (let i = 0; i < CirArr.length-1; i++) { if (CirArr[i] === this) { CirArr.splice(i, 1) } } } }

鼠標移入事件

canvas.onmousemove = function(e) { new Cir({ x: e.offsetX, //x坐標 y: e.offsetY, //y坐標 r: 30 //半徑 }) }

設置定時器

setInterval(() => { circular.clearRect(0, 0, window.innerWidth, window.innerHeight) for (let i = 0; i < CirArr.length-1; i++) { CirArr[i].ani() CirArr[i].addCir() } },20)

效果如下：

Canvas HTML

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。