使用 Canvas 製作滿屏愛心和文字動畫

語言: CN / TW / HK

theme: nico

本文正在參加「金石計劃 . 瓜分6萬現金大獎」

介紹

<canvas> 最早由 Apple 引入 WebKit,用於 Mac OS X 的 Dashboard,隨後被各個瀏覽器實現。如今,所有主流的瀏覽器都支持它。Canvas API 提供了一個通過 JavaScript 和 HTML 的 <canvas> 元素來繪製圖形的方式。它可以用於動畫、遊戲畫面、數據可視化、圖片編輯以及實時視頻處理等方面。Canvas 適合繪製大數據量圖形元素的圖表(如熱力圖、地理座標系或平行座標系上的大規模線圖或散點圖等),也適合實現某些視覺特效。它還能能夠以 png、jpg 或 webp 格式保存圖像。Canvas 提供了強大的 Web 繪圖能力,所以我們要學會使用它。

效果如下:

CPT2211112159-785x407.gif

步驟

  1. 準備一個 canvas 元素。 ```html

```

  1. 獲取 canvas 對象和上下文,初始化變量:窗口寬高、愛心和文字總數量、包含愛心和文字的數組,定義愛心圖片,圖片 src 可以是 base64 字符串類型或者本地圖片文件和網絡圖片鏈接。 js 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>';

  2. 定義一個 Heart 類,構造函數參數 type 標識用來判斷實例為愛心圖片還是文字類型,定義重繪方法 draw 和更新方法 update。 js 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) { // 設置文字屬性 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; } } }

  3. 定義一個獲取隨機文字的方法,用來動態渲染屏幕文字。 js 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'; } }

  4. 定義一個獲取隨機顏色的方法,用來動態渲染屏幕文字顏色。 js 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'; } }

  5. 定義渲染和初始化方法,添加 resize 事件,在窗口調整大小時自動適應。 ```js 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; }); ```

馬上掘金

代碼片段

參考資料

canvas實現滿屏愛心