JS+Canvas實現(xiàn)滿屏愛心和文字動畫的制作
介紹
<canvas>
最早由 Apple 引入 WebKit,用于 Mac OS X 的 Dashboard,隨后被各個瀏覽器實現(xiàn)。如今,所有主流的瀏覽器都支持它。Canvas API 提供了一個通過 JavaScript 和 HTML 的 <canvas>
元素來繪制圖形的方式。它可以用于動畫、游戲畫面、數(shù)據(jù)可視化、圖片編輯以及實時視頻處理等方面。Canvas 適合繪制大數(shù)據(jù)量圖形元素的圖表(如熱力圖、地理坐標系或平行坐標系上的大規(guī)模線圖或散點圖等),也適合實現(xiàn)某些視覺特效。它還能能夠以 png、jpg 或 webp 格式保存圖像。Canvas 提供了強大的 Web 繪圖能力,所以我們要學會使用它。
效果如下:
步驟
準備一個 canvas 元素。
<canvas id="drawHeart"></canvas>
獲取 canvas 對象和上下文,初始化變量:窗口寬高、愛心和文字總數(shù)量、包含愛心和文字的數(shù)組,定義愛心圖片,圖片 src 可以是 base64 字符串類型或者本地圖片文件和網(wǎng)絡(luò)圖片鏈接。
const canvas = document.getElementById('drawHeart'); const ctx = canvas.getContext('2d'); let wW = window.innerWidth; let wH = window.innerHeight; const num = 100; const hearts = []; const heartImage = new Image(); heartImage.src = 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" fill="red"/></svg>';
定義一個 Heart 類,構(gòu)造函數(shù)參數(shù) type 標識用來判斷實例為愛心圖片還是文字類型,定義重繪方法 draw 和更新方法 update。
class Heart { constructor(type) { this.type = type; // 初始化生成范圍 this.x = Math.random() * wW; this.y = Math.random() * wH; this.opacity = Math.random() * .5 + .5; // 偏移量 this.vel = { x: (Math.random() - .5) * 5, y: (Math.random() - .5) * 5 } this.initialW = wW * .5; this.initialH = wH * .5; // 縮放比例 this.targetScale = Math.random() * .15 + .02; // 最小0.02 this.scale = Math.random() * this.targetScale; // 文字位置 this.fx = Math.random() * wW; this.fy = Math.random() * wH; this.fs = Math.random() * 10; this.text = getText(); this.fvel = { x: (Math.random() - .5) * 5, y: (Math.random() - .5) * 5, f: (Math.random() - .5) * 2 } } draw() { ctx.save(); ctx.globalAlpha = this.opacity; ctx.drawImage(heartImage, this.x, this.y, this.width, this.height); // ctx.scale(this.scale + 1, this.scale + 1); if (!this.type) { // 設(shè)置文字屬性 ctx.fillStyle = getColor(); ctx.font = 'italic ' + this.fs + 'px sans-serif'; // 填充字符串 ctx.fillText(this.text, this.fx, this.fy); } ctx.restore(); } update() { this.x += this.vel.x; this.y += this.vel.y; if (this.x - this.width > wW || this.x + this.width < 0) { // 重新初始化位置 this.scale = 0; this.x = Math.random() * wW; this.y = Math.random() * wH; } if (this.y - this.height > wH || this.y + this.height < 0) { // 重新初始化位置 this.scale = 0; this.x = Math.random() * wW; this.y = Math.random() * wH; } // 放大 this.scale += (this.targetScale - this.scale) * .1; this.height = this.scale * this.initialH; this.width = this.height * 1.4; // -----文字----- this.fx += this.fvel.x; this.fy += this.fvel.y; this.fs += this.fvel.f; if (this.fs > 50) { this.fs = 2; } if (this.fx - this.fs > wW || this.fx + this.fs < 0) { // 重新初始化位置 this.fx = Math.random() * wW; this.fy = Math.random() * wH; } if (this.fy - this.fs > wH || this.fy + this.fs < 0) { // 重新初始化位置 this.fx = Math.random() * wW; this.fy = Math.random() * wH; } } }
定義一個獲取隨機文字的方法,用來動態(tài)渲染屏幕文字。
function getText() { const val = Math.random() * 10; if (val > 1 && val <= 3) { return 'always'; } else if (val > 3 && val <= 5) { return 'zzy'; } else if (val > 5 && val <= 8) { return 'taylor swift'; } else { return 'I Love You'; } }
定義一個獲取隨機顏色的方法,用來動態(tài)渲染屏幕文字顏色。
function getColor() { const val = Math.random() * 10; if (val > 0 && val <= 1) { return '#00f'; } else if (val > 1 && val <= 2) { return '#f00'; } else if (val > 2 && val <= 3) { return '#0f0'; } else if (val > 3 && val <= 4) { return '#368'; } else if (val > 4 && val <= 5) { return '#666'; } else if (val > 5 && val <= 6) { return '#333'; } else if (val > 6 && val <= 7) { return '#f50'; } else if (val > 7 && val <= 8) { return '#e96d5b'; } else if (val > 8 && val <= 9) { return '#5be9e9'; } else { return '#d41d50'; } }
定義渲染和初始化方法,添加 resize 事件,在窗口調(diào)整大小時自動適應(yīng)。
function init() { canvas.width = wW; canvas.height = wH; for (let i = 0; i < num; i++) { hearts.push(new Heart(i % 5)); } render(); } function render() { ctx.clearRect(0, 0, wW, wH); for (let i = 0; i < hearts.length; i++) { hearts[i].draw(); hearts[i].update(); } setTimeout(render, 60); } init(); window.addEventListener('resize', function() { canvas.width = wW = window.innerWidth; canvas.height = wH = window.innerHeight; });
效果圖
到此這篇關(guān)于JS+Canvas實現(xiàn)滿屏愛心和文字動畫的制作的文章就介紹到這了,更多相關(guān)JS Canvas愛心文字動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript隨機抽取0-100之間不重復(fù)的10個數(shù)
這篇文章主要為大家詳細介紹了javascript隨機抽取0-100之間不重復(fù)的10個數(shù),分享了兩種簡單辦法,感興趣的小伙伴們可以參考一下2016-02-02訪問百度和谷歌網(wǎng)速測試的javascript代碼
訪問百度和谷歌網(wǎng)速測試的javascript代碼...2007-08-08