Canvas

本篇文章是 Phaser 系列的一部分。點擊這裡 查看系列的第一篇文章。 Phaser 遊戲是在 HTML 的 <canvas> 元素中渲染的。 如果你對 Canvas 還不熟悉，我在 Canvas API 教程 中詳細介紹了它。 我們創建一個帶有特定寬度和高度的畫布，並在其中繪製內容。 我們無法使用 CSS 來對元素進行排版，而是需要使用更底層且較困難的 API。 幸運的是，Phaser（以及其他使用底層 Canvas 的庫）抽象了所有細節，所以我們可以專注於應用程式代碼。 我們可以通過在 Phaser 物件上調用 Game 靜態方法來初始化一個 Phaser 遊戲： new Phaser.Game() 我們必須將一個對象字面量傳遞給此函數，其中包含一組配置選項： new Phaser.Game({}) 在這個配置對象中，我們可以設置多個屬性。 首先，我們可以設置畫布的寬度和高度： new Phaser.Game({ width: 450, height: 600 }) 另一個我們可以傳遞的屬性是 backgroundColor，它接受一個十六進制值，例如 0x000000 表示黑色。 顏色類似於 CSS 顏色，但你需要在前面加上 0x 以便 JavaScript 知道這是一個十六進制數字。

改善 Twitter 卡片的一個故事 我會在 Twitter 上分享我的博客文章，曾經有一段時間，我為每篇博文畫了一張圖片。 我設置了 Hugo，使其使用存儲在帖子文件夾中的 banner.png 或 banner.jpg 圖片作為開放圖形圖片，如下所示： <meta property="og:image" content="https://flaviocopes.com/axios/banner.png" /> 如果一篇文章沒有圖片，我會顯示我的頭像代替： <meta property="og:image" content="https://flaviocopes.com/img/avatar.png" /> 問題來了：我很久以前就停止製作這些自定義的橫幅圖片了，而且我的大部分博文都沒有橫幅圖片。 它們在 Twitter 上看起來都一樣： 我無法手工製作500個橫幅圖片。自從看到 Indie Hackers 為論壇博客文章生成這些圖片（一個很棒的點子）之後，我就一直在考慮以編程方式生成這些圖片。 因此，在獲得了一個很好的橫幅圖片的靈感後，我決定為我的每一篇博文創建一個自定義橫幅。 該橫幅是一個 PNG 圖片，為了保持文章的重點（“如何使用 Node.js 和 Canvas 創建並保存圖片”），我將省略其中的一些部分。 此外，有很多不同的方法可以實現我做的事情，下面只是其中一種方法。 首先，我們需要哪些 npm 包？ 只需要一個！canvas： npm install canvas 這個包為我們提供了一個基於 Node.js 的 Canvas API 實現，我們在瀏覽器中非常熟悉和喜愛。 換句話說，我用來生成圖片的所有內容在瀏覽器中也可以運行。 只是，我們不是從 <canvas> HTML 元素獲取 Canvas 實例，而是載入庫，從中獲取 createCanvas 函數： const { createCanvas } = require('canvas') 然後，我調用此函數，傳遞 canvas 的寬度和高度，我設置為 1200x600：...

我想使用Node.js的canvas NPM包，但是執行npm install canvas會出現以下錯誤訊息： npm ERR! code 1 npm ERR! path /Users/flaviocopes/dev/old/generate-images-posts/node\_modules/canvas npm ERR! command failed npm ERR! command sh -c node-pre-gyp install --fallback-to-build npm ERR! Failed to execute '/opt/homebrew/Cellar/[[email protected]](/cdn-cgi/l/email-protection)/16.14.2/bin/node /opt/homebrew/Cellar/[[email protected]](/cdn-cgi/l/email-protection)/16.14.2/lib/node\_modules/npm/node\_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/flaviocopes/dev/old/generate-images-posts/node\_modules/canvas/build/Release/canvas.node --module\_name=canvas --module\_path=/Users/flaviocopes/dev/old/generate-images-posts/node\_modules/canvas/build/Release --napi\_version=8 --node\_abi\_napi=napi --napi\_build\_version=0 --node\_napi\_label=node-v93' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using [[email protected]](/cdn-cgi/l/email-protection) npm ERR! node-pre-gyp info using [[email protected]](/cdn-cgi/l/email-protection) | darwin | arm64 npm ERR!...

使用 CSS 或 HTML 的 width / height 屬性設定 canvas 的大小，例如 200 x 400： <canvas width="200" height="400"></canvas> 並且確保也在 JavaScript 中設定 canvas 物件的寬度 / 高度屬性，以避免文本模糊呈現，例如： canvas.width = 1800 canvas.height = 1200 首先，獲取對 canvas 的引用： const canvas = document.querySelector('canvas') 然後從它創建一個上下文對象： const context = canvas.getContext('2d') 現在，我們可以調用上下文對象的 fillText() 方法： context.fillText('hi!', 100, 100) 確保起點的 x 和 y 坐標包含在 canvas 的大小內。 你可以在調用 fillText() 之前傳遞額外的屬性來自定義外觀，例如： context.font = 'bold 70pt Menlo' context.fillStyle = '#ccc' context.fillText('hi!', 100, 100)

數據URL是瀏覽器提供的一個有用功能。 我們可以使用圖像來嵌入在HTML本身中，而不是引用文件系統文件，像這樣： <img src="data:image/png;base64,iVBORw0KGgoAA…" /> 其中，垃圾部分是由看似隨機的字母和數字組成的，非常長。 我正在使用Canvas API動態生成圖像，並偶然發現了Canvas物件的toDataURL()方法： canvas.toDataURL() 我認為這對於在伺服器端生成圖像並在網頁中提供圖像時非常有用。 特別是在Node.js進程中，使用canvas npm套件我們可以初始化一個Canvas： const { createCanvas, loadImage } = require('canvas') const canvas = createCanvas(200, 200) const ctx = canvas.getContext('2d') 然後，我們可以繪製圖像，例如使用ctx.fillText('Hello, World!', 50, 100)，並調用canvas.toDataURL()生成圖像的數據URL，並將其附加為HTML字符串： const imageHTML = '<img src="' + canvas.toDataURL() + '" />' 當然，您也可以在前端執行相同的操作，只是現在canvas物件是對您繪製所使用的<canvas> HTML元素的引用： const canvas = document.getElementById('canvas') //... const imageHTML = '<img src="' + canvas.toDataURL() + '" />'

動畫是一個迷人的主題。無論您想要添加互動動畫，如過渡效果，還是構建整個全屏體驗，您都擁有所有所需的工具。 動畫是一個迷人的主題。無論您想要添加互動動畫，如過渡效果，還是構建整個全屏體驗，您都擁有所有所需的工具。 而且，您有很多不同且具有不同目的的選擇。 CSS 通常被認為更加高效，儘管 JavaScript 也可以非常高效。一切取決於您需要做什麼，以及每幀渲染所需的時間。 CSS 過渡效果 CSS 動畫 SVG 動畫 Canvas API 動畫 Web Animations API WebGL 讓我們總結這些選項，找出哪一種是合適的選擇。 CSS 過渡效果 CSS 過渡效果 有一個起點和終點。它們將一點從 X 移動到 Y，或從可見變為不可見。 它是最簡單的動畫，主要用於與頁面其餘部分無縫集成的微妙動畫。 通過過渡效果，您可以從一個狀態轉換到另一個狀態，但您無法做更多。 CSS 動畫 與 CSS 過渡效果相比，CSS 動畫 允許您具有不止 2 個狀態，事實上，您可以擁有很多狀態，並且可以用於創建更複雜的動畫。 當您需要相對簡單且無法使用過渡效果實現的動畫時，建議使用 CSS 動畫。 SVG 動畫 SVG 是一種出色的基於矢量的格式，可以使用 SMIL（SVG 動畫的"本地"格式）創建動畫。 由於存在跨瀏覽器的不一致性（並且 IE/Edge 不支援），SMIL 快將在 Chrome 中廢棄，但是團隊已暫時撤銷了此決定。 他們希望推動 CSS 動畫和 Web Animations API 來代替 SMIL。 Canvas API 動畫 Canvas API 提供了一種在屏幕上繪製的方法，使用的是點陣而不是向量。 儘管動畫是可能的，但不如其他選項高效。...