HTML5 的Canvas 如何繪製圖形和實(shí)現(xiàn)動(dòng)畫(huà)？ 1. 在HTML 中插入 標(biāo)籤並設(shè)置id 和尺寸；2. 通過(guò)JavaScript 獲取canvas 元素並創(chuàng)建2D 繪圖上下文；3. 使用fillRect、strokeRect、arc 等方法繪製形狀；4. 使用fillText 添加文本，用drawImage 繪製圖片；5. 利用clearRect 清除畫(huà)布並結(jié)合requestAnimationFrame 實(shí)現(xiàn)動(dòng)畫(huà)效果。掌握這些基本操作即可開(kāi)始使用Canvas 進(jìn)行繪圖與動(dòng)畫(huà)開(kāi)發(fā)。

Canvas 是HTML5 提供的一個(gè)非常實(shí)用的繪圖工具，雖然它本身只是一個(gè)空白畫(huà)布，但通過(guò)JavaScript 的操作，你可以用它來(lái)繪製圖形、動(dòng)畫(huà)甚至遊戲界面。關(guān)鍵在於理解它的基本使用方式。

準(zhǔn)備一個(gè)Canvas 元素

首先，你需要在HTML 中插入一個(gè)<canvas></canvas>標(biāo)籤。最基礎(chǔ)的寫法如下：

 <canvas id="myCanvas" width="500"    style="max-width:90%"></canvas>

這裡設(shè)置了寬度和高度，如果不設(shè)置，默認(rèn)是300x150 像素。記得給它加個(gè)id ，方便後續(xù)用JS 操作。

接下來(lái)，在JavaScript 中獲取這個(gè)canvas 對(duì)象，並創(chuàng)建繪圖上下文（context），這是所有繪製操作的基礎(chǔ)：

 const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

getContext('2d')是最常見(jiàn)的模式，表示你要進(jìn)行二維繪圖。

繪製簡(jiǎn)單的形狀

有了context 之後，就可以開(kāi)始畫(huà)東西了。比如畫(huà)一個(gè)矩形：

 ctx.fillStyle = 'blue'; // 設(shè)置填充顏色ctx.fillRect(50, 50, 100, 100); // 在(50,50) 位置畫(huà)一個(gè)100x100 的矩形

這段代碼會(huì)在畫(huà)布上畫(huà)出一個(gè)藍(lán)色的正方形。如果你想畫(huà)邊框而不是填充，可以用strokeRect方法。

畫(huà)圓形稍微複雜一點(diǎn)，需要使用路徑（path）的方式：

 ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2); // 圓心在(200,100)，半徑50
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();

記住每次畫(huà)完圖形後最好調(diào)用closePath() ，保持代碼整潔。

添加文本和圖片

Canvas 不只能畫(huà)圖形，還可以添加文字和圖像。

添加文字：

 ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas!', 10, 30);

這會(huì)在左上角顯示一行黑色文字。

繪製圖片：

先準(zhǔn)備一張圖片，可以是本地或網(wǎng)絡(luò)上的URL：

 const img = new Image();
img.src = 'example.png';
img.onload = function() {
    ctx.drawImage(img, 100, 100, 200, 150); // 在指定位置繪製圖片，並設(shè)置寬高};

注意，圖片加載是異步的，所以必須等onload回調(diào)觸發(fā)後再繪製。

動(dòng)畫(huà)與清除畫(huà)布

想讓canvas 動(dòng)起來(lái)？那就得不斷重繪畫(huà)佈內(nèi)容。通常會(huì)用requestAnimationFrame來(lái)實(shí)現(xiàn)流暢動(dòng)畫(huà)。

比如讓一個(gè)圓移動(dòng)：

 let x = 0;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整個(gè)畫(huà)布ctx.beginPath();
    ctx.arc(x, 100, 30, 0, Math.PI * 2);
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.closePath();

    x = 2;
    if (x < canvas.width) {
        requestAnimationFrame(animate);
    }
}

animate();

這裡的關(guān)鍵點(diǎn)是每次循環(huán)前要調(diào)用clearRect把之前的畫(huà)面清掉，否則舊的圖形會(huì)一直留在畫(huà)布上。

基本上就這些。 Canvas 功能強(qiáng)大，但剛上手時(shí)掌握這幾個(gè)基本操作就夠了。剛開(kāi)始可能會(huì)覺(jué)得有點(diǎn)抽象，多試幾次就能上手了。

以上是如何在HTML中使用帆布元素？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！