生活周遭的事、程式語言與網頁: 3月 2026

2026年3月29日星期日

想要製作一個封面嗎？本篇文章就是應用 HTML5 Canvas fillText() 方法來完成一個簡單的封面製作。範例程式碼如下：

本範例使用 JavaScript 的 setInterval() 方法來建立定時執行的計數器，並搭配邏輯運算子 || （OR）來判斷是否達到上下限。範例程式碼如下：

let everyStep = 2; // 每次變動值

let thiscounter = 0; // 初始值

const maxValueis = 100; // 上限

const minValueis = -100; // 下限

let totalRuns = 250; // 執行次數

const timerex = setInterval(() => {

console.log(`目前計數器的值：${thiscounter}`);

// 預判是否會超出範圍，提前反轉方向

if (thiscounter + everyStep > maxValueis || thiscounter + everyStep < minValueis) {

HTML5 新增的元素 Canvas 功能非常強大。譬如說想要繪製多個連續正方形的圖案。如果使用 Canvas 來繪製的話，會非常的方便又節省時間就能有效率達到想要的效果。範例程式碼如下：

<body>

var canvas = document.getElementById("canvas");

var ctx_1 = canvas.getContext("2d");

// 進行連續正方形繪製程序，使用兩個 for 迴圈及應用 strokeRect() 方法來繪製出兩個連續正方形圖案。

var j=k=10, l=70;