、什么是Canvas？

HTML5 提供Canvas API，其本質(zhì)上是一個(gè)DOM元素，可以看成是瀏覽器提供一塊畫布供我們?cè)谏厦驿秩?D或者3D圖形。由于3D繪制上下文(webgl)目前在很多瀏覽器上兼容性較差，所以我們一般用于繪制2D圖形。

<canvas id="canvas"></canvas>

2、為什么使用Canvas？

Canvas是HTML5引入的標(biāo)簽，在此之前我們通常會(huì)使用SVG來(lái)繪制一些圖形，那么兩者之間有什么區(qū)別呢？SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語(yǔ)言XML描述的2D圖形的語(yǔ)言，兩者部分區(qū)別：

• SVG 圖像是使用各種元素創(chuàng)建的，這些元素分別應(yīng)用于矢量圖像的結(jié)構(gòu)、繪制與布局；而Canvas本身并不描述圖像，而是通過(guò)Javascript完成繪制；
• 如上所述，SVG本身是DOM元素，每一個(gè)描述元素也是DOM元素，瀏覽器在進(jìn)行渲染時(shí)需要進(jìn)行大量計(jì)算以處理每一個(gè)元素；而在渲染Canvas的過(guò)程中，瀏覽器只需要渲染一張畫布，其余的是通過(guò)Javascript引擎執(zhí)行邏輯來(lái)繪制；
• SVG(矢量圖)不依賴分辨率，放大不會(huì)失真；而Canvas(位圖)依賴分辨率，放大會(huì)失真；

由于Canvas是通過(guò)Javascript來(lái)完成繪制的，所以可控性很強(qiáng)，我們可以比較精確的控制圖形渲染的每一幀；從另一方面來(lái)說(shuō)，如果在高頻率渲染中要處理過(guò)多的DOM元素就意味著性能一定不會(huì)太好，渲染速度會(huì)下降很多。Canvas的高性能能夠保障復(fù)雜場(chǎng)景中圖形的渲染效率，所以目前很多領(lǐng)域都會(huì)使用Canvas，例如動(dòng)畫、游戲圖形、數(shù)據(jù)可視化、照片處理和實(shí)時(shí)視頻處理等。

3、Canvas的基本使用

要使用Canvas，我們需要先獲取Canvas元素的引用繼而通過(guò)getContext()方法獲取圖形的繪制上下文。

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

獲取到圖形繪制上下文后，我們就能使用CanvasRenderingContext2D接口上的繪圖API了，接下來(lái)我們可以了解一些比較常規(guī)的使用。

3.1、畫布屬性：

• width、height：畫布的寬度以及高度，默認(rèn)大小為300x150；
• fillStyle：填充圖形的樣式，值可以是color string、CanvasGradient對(duì)象；
• strokeStyle：輪廓圖形的樣式，值可以是color string、CanvasGradient對(duì)象；
• lineWidth：繪制線條的寬度；
• globalAlpha：畫布的透明度，0-1的偏移值；
• globalCompositeOperation：畫布中新老圖形重疊時(shí)的渲染方式，默認(rèn)為source-over，新圖形覆蓋老圖形；
• ......

ctx.width=300
ctx.height=300
ctx.fillStyle='#fff'
ctx.strokeStyle='blue'
ctx.lineWidth=5
ctx.globalAlpha=0.3
ctx.globalCompositeOperation='destination-out' // 新老圖形重疊部分變透明
......

3.2、繪制圖形：

• .fillRect(x,y,width,height):繪制一個(gè)填充的矩形，矩形左上角的坐標(biāo)為(x,y)，高寬分別為width、height；
• .strokeRect(x,y,width,height):繪制一個(gè)矩形邊框，矩形左上角的坐標(biāo)為(x,y)，高寬分別為width、height；
• .clearRect(x,y,width,height):清除指定矩形區(qū)域，讓清除部分完全透明;

ctx.fillStyle='red' 
ctx.fillRect(100,100,100,100)


ctx.strokeStyle='blue'  
ctx.strokeRect(200,200,100,100)


ctx.clearRect(125,125,50,50)
ctx.strokeRect(130,130,40,40)

3.3、繪制路徑：

• .beginPath()：開(kāi)始一段路徑的繪制；
• .closePath()：從起始點(diǎn)到當(dāng)前點(diǎn)，結(jié)束路徑的繪制，非必需；
• .fill()：根據(jù)路徑生成填充圖形；
• .stroke()：通過(guò)路徑生成輪廓圖形；
• .moveTo(x,y)：聲明一段路徑的起始點(diǎn)；
• .lineTo(x,y)：繪制一條從當(dāng)前坐標(biāo)到(x,y)的線；

ctx.beginPath()
ctx.moveTo(50,50)
ctx.lineTo(100,100)
ctx.lineTo(100,0)
ctx.fill()


ctx.beginPath()
ctx.moveTo(110,100)
ctx.lineTo(150,100)
ctx.lineTo(150,200)
ctx.lineTo(110,200)
ctx.closePath() // 輪廓圖形不會(huì)根據(jù)從當(dāng)前坐標(biāo)到起始坐標(biāo)生成輪廓，所以需要閉合路徑
ctx.stroke()

3.4、繪制圓弧：

• .arc(x,y,radius,startAngle,endAngle,anticlockwise)：畫一個(gè)以（x,y）為圓心的以 radius 為半徑的圓弧（圓），從 startAngle 開(kāi)始到 endAngle 結(jié)束，按照 anticlockwise 給定的方向（默認(rèn)為順時(shí)針，false）來(lái)生成;
• arcTo(x1,y1,x2,y2,radius)：根據(jù)給定的兩條切線中的一組切點(diǎn)坐標(biāo)生成半徑為radius的圓弧;

注意：arc函數(shù)中的角度的單位是弧度而不是度，弧度=(Math.PI/180)*度

// 圓左上部分
ctx.beginPath()
ctx.arc(100,100,50,Math.PI,Math.PI*3/2,false)
ctx.strokeStyle='#ff6700'
ctx.stroke()


// 圓右上部分
ctx.beginPath()
ctx.arc(100,100,50,Math.PI*3/2,0,false)
ctx.strokeStyle='#6700ff'
ctx.stroke()


// 圓右下部分
ctx.beginPath()
ctx.arc(100,100,50,0,Math.PI/2,false)
ctx.strokeStyle='#00FFFF'
ctx.stroke()


// 圓左下部分
ctx.beginPath()
ctx.arc(100,100,50,Math.PI/2,Math.PI,false)
ctx.strokeStyle='#8B008B'
ctx.stroke()


// 兩條切線的交點(diǎn)坐標(biāo)為(0,0)
ctx.beginPath()
ctx.moveTo(100,0)
ctx.arcTo(0,0,0,100,100)
ctx.fillStyle='blue'
ctx.fill()

3.5、漸變對(duì)象：

• .createLinearGradient(x1, y1, x2, y2)：創(chuàng)建一個(gè)沿參數(shù)坐標(biāo)指定的直線的漸變，開(kāi)始坐標(biāo)為(x1,y1)，結(jié)束坐標(biāo)為(x2,y2)；
• .createRadialGradient(x1, y1, r1, x2, y2, r2)：創(chuàng)建根據(jù)參數(shù)確定兩個(gè)圓的坐標(biāo)的放射性漸變，開(kāi)始圓形圓心為(x1,y1)，半徑為r1；結(jié)束圓形圓心為(x2,y2)，半徑為r2；

創(chuàng)建好漸變對(duì)象之后，可以通過(guò)漸變對(duì)象上的.addColorStop(offset,color)為每一個(gè)漸變階段填充顏色，offset為0-1的偏移值。

const gradient=ctx.createLinearGradient(50, 50, 250, 50)
gradient.addColorStop(0, 'blue')
gradient.addColorStop(0.5, 'green')
gradient.addColorStop(1, 'red')
ctx.fillStyle=gradient
ctx.fillRect(0, 0, 300, 90)


const radialGradient=ctx.createRadialGradient(200,200,100,200,200,50);
radialGradient.addColorStop(0,"yellow");
radialGradient.addColorStop(1,"green");
ctx.fillStyle=radialGradient;
ctx.fillRect(100,100,200,200);

3.6、像素操作：

• .drawImage(image,x,y,width,height)：image可以是image對(duì)象、canvas元素、video元素；
• .getImageData(x,y,width,height)：獲取坐標(biāo)為(x,y)一定區(qū)域內(nèi)圖像的像素?cái)?shù)據(jù)；

const div=document.querySelector('div')
let mousedown=false;


function getRandom() {
  return Math.round(255 * Math.random());
}


function getColor() {
  return `rgb(${getRandom()},${getRandom()},${getRandom()})`;
}


const gradient=ctx.createLinearGradient(0, 0, 300, 300);
gradient.addColorStop(0, getColor());
gradient.addColorStop(0.6, getColor());
gradient.addColorStop(1, getColor());


function clear() {
  ctx.fillStyle=gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}


ctx.beginPath();
ctx.fillStyle=gradient;
ctx.fillRect(0, 0, 300, 300);


function selector(x=150, y=150) {
  clear();
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, Math.PI * 2);
  ctx.strokeStyle="#fff";
  ctx.stroke();
  const { data }=ctx.getImageData(x, y, 1, 1); // 獲取(x,y)點(diǎn)對(duì)應(yīng)的imageData
  const color=`rgba(${data[0]},${data[1]},${data[2]},${data[3] / 255})`
  div.innerText=`color: ${color}`;
  div.style.backgroundColor=color
}


function handleSelector(e) {
  const x=e.offsetX;
  const y=e.offsetY;
  selector(x, y);
}


canvas.addEventListener("mousedown", (e)=> {
  mousedown=true;
  handleSelector(e)
});


canvas.addEventListener("mouseup", ()=> {
  mousedown=false;
});


canvas.addEventListener("mousemove", (e)=> {
  if (mousedown) {
    handleSelector(e)
  }
});


selector();

3.7、畫布狀態(tài)：

• .save()：將當(dāng)前畫布的狀態(tài)推入到棧中，例如fillStyle、2D轉(zhuǎn)換等；
• .restore()：將棧頂元素彈出，恢復(fù)上一次推入棧中畫布的狀態(tài)；

當(dāng)我們需要通過(guò)空間轉(zhuǎn)換來(lái)繪制圖形時(shí)，保存與恢復(fù)畫布的狀態(tài)是很關(guān)鍵的，因?yàn)槲覀兪窃谕粔K畫布上繪制圖形，而變換都是基于畫布的，這與我們平時(shí)使用到的CSS 2D轉(zhuǎn)換截然不同，所以我們?cè)谙乱徊嚼L制時(shí)要確認(rèn)此時(shí)畫布的狀態(tài)是否是我們的理想狀態(tài)。

ctx.save() // 保存畫布初始狀態(tài)
ctx.translate(100,100) // 將畫布原點(diǎn)轉(zhuǎn)移至(100,100)
ctx.fillStyle='red'
ctx.fillRect(0,0,50,50)


ctx.restore() // 恢復(fù)畫布狀態(tài)，此時(shí)畫布原點(diǎn)為(0,0)
ctx.fillStyle='blue'
ctx.fillRect(0,0,50,50)

3.8、幾何變化：

• .translate(x,y)：畫布默認(rèn)的原點(diǎn)是(0,0)，此方法可以切換原點(diǎn)到(x,y)而不需要手動(dòng)更改繪制圖形的坐標(biāo)；
• .rotate(angle)：將畫布旋轉(zhuǎn)一定的角度，angle單位為弧度；
• .scale(sx,sy)：sx為水平方向的縮放比例，sy為豎直方向的縮放比例；
• .transform(a,b,c,d,e,f)：依次為水平縮放、垂直傾斜、水平傾斜、垂直縮放、水平移動(dòng)、垂直移動(dòng)；

const colors=['red','orange','yellow','green','blue','purple'];
ctx.translate(150,150)
    
for(let i=0; i < 6; i++) {
  ctx.beginPath()
  ctx.fillStyle=colors[i]
  ctx.moveTo(0,0)
  ctx.lineTo(100,0)
  ctx.lineTo(100,50)
  ctx.rotate(Math.PI/3)
  ctx.fill()
}

4、綜合實(shí)戰(zhàn)

const p=Math.PI;


function clock() {
  const date=new Date();
  const hour=date.getHours()
  const s=date.getSeconds();
  const m=date.getMinutes();
  const h=!!(hour % 12) ? hour % 12 : 12;
  ctx.clearRect(0, 0, canvas.width, canvas.height);


  ctx.save(); // 保存畫布初始狀態(tài)


  ctx.translate(150, 150);
  ctx.rotate(-p / 2);


  // 輪廓
  ctx.beginPath();
  ctx.lineWidth=5;
  ctx.strokeStyle="#76b2ff";
  ctx.arc(0, 0, 80, 0, p * 2);
  ctx.stroke();


  // 圓心
  ctx.beginPath();
  ctx.arc(0, 0, 2, 0, p * 2);
  ctx.fill();


  // 分針、秒針刻度
  for (let i=0; i < 60; i++) {
    ctx.beginPath();
    ctx.rotate(p / 30);
    ctx.moveTo(75, 0);
    ctx.lineWidth=4;
    ctx.strokeStyle="#89f086";
    ctx.lineTo(80, 0);
    ctx.stroke();
  }


  // 時(shí)針刻度
  for (let i=0; i < 12; i++) {
    ctx.beginPath()
    ctx.rotate(p / 6)
    ctx.moveTo(70, 0)
    ctx.lineTo(80, 0)
    ctx.stroke()
  }


  ctx.save(); // 保存畫布變換之后的狀態(tài)


  // 秒針
  ctx.beginPath();
  ctx.rotate(s * (p / 30));
  ctx.lineWidth=2
  ctx.strokeStyle='#ff6700'
  ctx.moveTo(0, 0);
  ctx.lineTo(80, 0);
  ctx.stroke();


  // 恢復(fù)之前的狀態(tài)再保存，時(shí)針、分針、秒針都是基于原點(diǎn)以及畫布方向變換后繪制
  ctx.restore();
  ctx.save();


  // 分針
  ctx.beginPath();
  ctx.rotate(m * (p / 30));
  ctx.lineWidth=3;
  ctx.strokeStyle='#6700ff'
  ctx.moveTo(0, 0);
  ctx.lineTo(70, 0);
  ctx.stroke();


  ctx.restore();


  // 時(shí)針
  ctx.beginPath();
  ctx.rotate(h * (p / 6));
  ctx.lineWidth=4;
  ctx.moveTo(0, 0);
  ctx.lineTo(60, 0);
  ctx.stroke();


  ctx.restore(); // 恢復(fù)畫布最初狀態(tài)


  document.querySelector('div').innerText=`Now：${h} : ${m} : ${s}  ${hour > 12 ? 'pm' : 'am'}`


  window.requestAnimationFrame(clock);
}
clock();

5、小結(jié)

隨著互聯(lián)網(wǎng)的高速發(fā)展，用戶對(duì)頁(yè)面的視覺(jué)和交互有著越來(lái)越高的要求，傳統(tǒng)的web開(kāi)發(fā)無(wú)法得到滿足，利用Canvas強(qiáng)大的繪圖能力，可以讓網(wǎng)頁(yè)顯示的內(nèi)容更加的豐富多彩，也能給用戶帶來(lái)更好的視覺(jué)體驗(yàn)。

作者:LLS-FE團(tuán)隊(duì)

來(lái)源:微信公眾號(hào):流利說(shuō)技術(shù)團(tuán)隊(duì)

出處:https://mp.weixin.qq.com/s/bvkx3wOeMvIUU64cktX6iA

TML5 Canvas是HTML5新增的一個(gè)元素，它提供了一個(gè)可執(zhí)行JavaScript腳本繪制圖形的區(qū)域。Canvas元素通過(guò)使用JavaScript API，可以在瀏覽器上繪制圖形、渲染動(dòng)畫和實(shí)現(xiàn)交互效果等。

使用原理：
HTML5 Canvas通過(guò)使用JavaScript API在瀏覽器中創(chuàng)建一塊畫布（Canvas），然后可以使用腳本語(yǔ)言（通常是JavaScript）在畫布上繪制各種形狀、線條、圖像和文本等。Canvas使用像素渲染，可以直接操作像素?cái)?shù)據(jù)，因此在性能方面相比其他圖形技術(shù)（如SVG）更具優(yōu)勢(shì)。

場(chǎng)景：
HTML5 Canvas可以應(yīng)用于各種需要圖形繪制、動(dòng)畫渲染和交互效果的場(chǎng)景，例如：

1. 游戲開(kāi)發(fā)：Canvas可以用來(lái)開(kāi)發(fā)2D或3D游戲，通過(guò)繪制游戲場(chǎng)景、角色和動(dòng)畫等實(shí)現(xiàn)游戲效果。
2. 數(shù)據(jù)可視化：Canvas可以用來(lái)繪制各種圖表和圖形，實(shí)現(xiàn)數(shù)據(jù)可視化效果。
3. 圖像處理：Canvas可以對(duì)圖像進(jìn)行像素級(jí)別的操作，實(shí)現(xiàn)圖像處理功能，例如濾鏡、裁剪和合成等。
4. 實(shí)時(shí)視頻處理：Canvas可以結(jié)合WebRTC等技術(shù)實(shí)現(xiàn)實(shí)時(shí)視頻處理，例如在視頻通話中添加特效和濾鏡等。

代碼示例：
以下是一個(gè)簡(jiǎn)單的HTML5 Canvas代碼示例，用于在畫布上繪制一個(gè)矩形和一個(gè)圓形：

<!DOCTYPE html>  
<html>  
    <head>  
     			<title>HTML5 Canvas示例</title>  
    </head>  
      <body>  
           <canvas id="myCanvas" width="400" height="400"></canvas>  
             <script>  
                 // 獲取Canvas元素和繪圖上下文  
                 var canvas=document.getElementById("myCanvas");  
                 var ctx=canvas.getContext("2d");  
                 // 繪制矩形  
                 ctx.fillStyle="blue";  
                 ctx.fillRect(50, 50, 100, 100);  
                 // 繪制圓形  
                 ctx.beginPath();  
                 ctx.arc(200, 200, 50, 0, Math.PI * 2);  
                 ctx.fillStyle="red";  
                 ctx.fill();  
             </script>  
      </body>  
</html>

在上述代碼中，我們首先獲取了Canvas元素和繪圖上下文（Context），然后使用fillRect()方法繪制了一個(gè)藍(lán)色的矩形，使用arc()方法繪制了一個(gè)紅色的圓形。最后，我們使用fill()方法填充了圓形的顏色。

載說(shuō)明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

使用HTML5 Canvas構(gòu)建繪圖應(yīng)用是在Web瀏覽器中創(chuàng)建交互式和動(dòng)態(tài)繪圖體驗(yàn)的絕佳方式。HTML5 Canvas元素提供了一個(gè)繪圖表面，允許您操作像素并以編程方式創(chuàng)建各種形狀和圖形。本文將為您提供使用HTML5 Canvas創(chuàng)建繪圖應(yīng)用的概述和指導(dǎo)。此外，它還將通過(guò)解釋HTML設(shè)置、JavaScript實(shí)現(xiàn)、用戶交互和繪圖功能來(lái)幫助您理解構(gòu)建繪圖應(yīng)用的步驟。

HTML canvas標(biāo)簽是一個(gè)HTML元素，它提供了一個(gè)空白的繪圖表面，可以使用JavaScript來(lái)渲染圖形、形狀和圖像。繪圖應(yīng)用程序利用HTML5 canvas的功能，使用戶能夠以數(shù)字方式創(chuàng)建藝術(shù)作品、草圖和插圖。此外，使用HTML5 canvas構(gòu)建的繪圖應(yīng)用程序允許用戶與畫布進(jìn)行交互，捕捉鼠標(biāo)移動(dòng)和點(diǎn)擊事件，實(shí)時(shí)繪制、擦除或操作元素。

HTML5畫布非常適合創(chuàng)建繪圖應(yīng)用程序，原因如下：

• 它提供了一個(gè)動(dòng)態(tài)的繪圖界面，可以實(shí)時(shí)更新。
• 它提供了豐富的繪圖API，用于創(chuàng)建各種繪圖工具和功能。
• 現(xiàn)代網(wǎng)絡(luò)瀏覽器的原生支持。
• 支持交互和事件處理，用于捕獲用戶輸入。
• 啟用動(dòng)畫和特效，讓繪畫栩栩如生。
• 允許圖像操作，包括加載、顯示和轉(zhuǎn)換圖像。

HTML設(shè)置

您可以使用HTML5 Canvas以以下方式為繪圖應(yīng)用程序設(shè)置HTML結(jié)構(gòu)：

• 在代碼編輯器中創(chuàng)建一個(gè)新的HTML文件或打開(kāi)一個(gè)已存在的文件。
• 從基本的HTML結(jié)構(gòu)開(kāi)始，通過(guò)包含 <!DOCTYPE html> 聲明，打開(kāi) <html> 標(biāo)簽，并添加 <head> 和 <body> 部分。
• 在 <head> 部分，您可以設(shè)置應(yīng)用程序的標(biāo)題并包含任何必要的CSS樣式或外部庫(kù)。
• 在 <body> 部分中添加一個(gè) <canvas> 元素，它將作為應(yīng)用程序的繪圖表面。您可以指定所需的寬度和高度屬性來(lái)定義畫布的尺寸。
• 在 <canvas> 元素下面，您可以添加任何其他的HTML元素，以便在您的繪圖應(yīng)用程序中使用，比如按鈕、顏色選擇器或工具欄。
• 您可以根據(jù)需求自定義HTML結(jié)構(gòu)，添加任何必要的元素、樣式和ID以供繪圖應(yīng)用程序使用。以下是繪圖應(yīng)用程序的基本HTML設(shè)置示例：

<!DOCTYPE html>
<html>
<head>
 <title>Drawing Application</title>
 <style>
  body {
   margin: 3px;
   padding: 6px;
   font-size: 22px;
  }
  canvas {
   border: 2px solid black;
  }
  .toolbar button,
  #clearButton,
  #saveButton {
   padding: 15px;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <h1>HTML Setup for a Drawing Application Using HTML5 Canvas</h1>
 <canvas id="myCanvas" width="700" height="400"></canvas>
 <button id="clearButton">Clear</button>
</body>
</html>

結(jié)果：

在上面的示例中，我們通過(guò)添加帶有ID為“myCanvas”的畫布元素并分別指定其寬度和高度為700和400像素來(lái)構(gòu)建了繪圖應(yīng)用程序的HTML結(jié)構(gòu)。我們還在畫布下方包含了一個(gè)ID為“clearButton”的“清除”按鈕，為用戶提供了一種方便的方式來(lái)從畫布中刪除所有繪制的元素，并為新的繪圖創(chuàng)建一個(gè)空白畫布。

繪圖應(yīng)用的樣式設(shè)計(jì)

添加一些元素和功能，使用額外的HTML和CSS使繪圖應(yīng)用程序看起來(lái)更像一個(gè)應(yīng)用程序。例如，您可以添加一個(gè)工具欄、一個(gè)顏色調(diào)色板、一個(gè)畫筆大小和一個(gè)狀態(tài)欄。以下是一個(gè)示例，其中包含一些額外的元素，以增強(qiáng)繪圖應(yīng)用程序的外觀和布局：

<div class="toolbar">
 <button id="pencilTool">Pencil</button>
 <button id="brushTool">Brush</button>
 <button id="eraserTool">Eraser</button>
 <input type="color" id="colorPicker" />
 <select id="brushSize">
  <option value="1">1px</option>
  <option value="3">3px</option>
  <option value="5">5px</option>
 </select>
</div>
<div class="color-palette">
 <div class="color-swatch" style="background-color: black"></div>
 <div class="color-swatch" style="background-color: red"></div>
 <div class="color-swatch" style="background-color: green"></div>
 <div class="color-swatch" style="background-color: blue"></div>
</div>

使用CSS進(jìn)行樣式設(shè)置：

.toolbar {
 margin-bottom: 12px;
}
.toolbar button {
 padding: 10px;
 margin-right: 7px;
 background: white;
 color: black;
 border: none;
 cursor: pointer;
}
.color-palette {
 display: flex;
 justify-content: center;
 margin-bottom: 12px;
}
.color-palette .color-swatch {
 width: 32px;
 height: 32px;
 border: 3px solid white;
 cursor: pointer;
 margin-right: 6px;
}
.status-bar {
 padding: 7px;
 background: white;
 color: black;
}

結(jié)果：

上面的例子包括了創(chuàng)建繪圖應(yīng)用所需的結(jié)構(gòu)和樣式，包括工具欄（帶有不同工具的按鈕，如鉛筆、畫筆、橡皮擦）、顏色調(diào)色板、畫筆大小選擇下拉菜單、繪圖畫布、狀態(tài)欄和清除按鈕。您可以根據(jù)所需的功能自定義這些元素。

JavaScript 設(shè)置

沒(méi)有JavaScript功能，上述示例中的按鈕、顏色樣本和清除按鈕將不會(huì)執(zhí)行任何操作。要使用繪圖應(yīng)用程序，您必須添加相應(yīng)的JavaScript源代碼來(lái)處理功能和與畫布元素的交互。以下是您可以使用JavaScript處理畫布元素功能和交互的幾種方式：

• 你需要使用canvas元素的ID在JavaScript中訪問(wèn)它，并獲取繪圖上下文。繪圖上下文提供了在canvas上繪制的方法。
• 要做到這一點(diǎn)，請(qǐng)?jiān)?<script> 標(biāo)簽內(nèi)添加以下JavaScript代碼：

const canvas=document.getElementById("myCanvas");
const context=canvas.getContext("2d");

• 為了啟用繪圖功能，您必須處理用戶交互，如鼠標(biāo)點(diǎn)擊和移動(dòng)。
• 將事件監(jiān)聽(tīng)器附加到畫布元素以捕獲 mousedown 、 mousemove 、 mouseup 和 mouseout 事件。
• 使用 mousedown 事件開(kāi)始繪制，使用 mousemove 事件在鼠標(biāo)移動(dòng)時(shí)繪制，使用 mouseup 事件在釋放鼠標(biāo)按鈕時(shí)停止繪制，使用 mouseout 事件在光標(biāo)移出畫布時(shí)停止繪制。
• 要實(shí)現(xiàn)繪圖的事件處理函數(shù)，請(qǐng)使用 startDrawing 、 last position 和 stopDrawing 。
• startDrawing 設(shè)置繪圖標(biāo)志并保存起始位置， draw 根據(jù)鼠標(biāo)移動(dòng)從上一位置到當(dāng)前位置繪制線條， stopDrawing 重置繪圖標(biāo)志。
• 要初始化變量以跟蹤繪圖狀態(tài)，請(qǐng)使用 isDrawing 、 lastX 和 lastY 。它們可以跟蹤繪圖狀態(tài)和光標(biāo)或指針的先前坐標(biāo)。
• 變量 isDrawing 是一個(gè)布爾標(biāo)志，指示用戶當(dāng)前是否正在繪制，而 lastX 和 lastY 存儲(chǔ)光標(biāo)或指針的先前坐標(biāo)，使得可以在畫布上繪制平滑且連續(xù)的線條。以下是如何使用JavaScript來(lái)改進(jìn)繪圖應(yīng)用程序的示例：

const canvas=document.getElementById("myCanvas");
const ctx=canvas.getContext("2d");
let isDrawing=false;
let selectedTool="pencil";
function startDrawing(event) {
 isDrawing=true;
 draw(event);
}
function draw(event) {
 if (!isDrawing) return;
 const x=event.clientX - canvas.offsetLeft;
 const y=event.clientY - canvas.offsetTop;
 ctx.lineTo(x, y);
 ctx.stroke();
}
function stopDrawing() {
 isDrawing=false;
 ctx.beginPath();
}
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
const clearButton=document.getElementById("clearButton");
clearButton.addEventListener("click", function() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
});
const colorSwatches=document.querySelectorAll(".color-swatch");
colorSwatches.forEach((swatch)=> {
 swatch.addEventListener("click", function() {
  const color=this.style.backgroundColor;
  ctx.strokeStyle=color;
 });
});
const brushSizeSelect=document.getElementById("brushSize");
brushSizeSelect.addEventListener("change", function() {
 const brushSize=this.value;
 ctx.lineWidth=brushSize;
});
const pencilToolButton=document.getElementById("pencilTool");
pencilToolButton.addEventListener("mousedown", function() {
 selectedTool="pencil";
 ctx.globalCompositeOperation="source-over";
});
const brushToolButton=document.getElementById("brushTool");
brushToolButton.addEventListener("mousedown", function() {
 selectedTool="brush";
 ctx.globalCompositeOperation="multiply";
});
const eraserToolButton=document.getElementById("eraserTool");
eraserToolButton.addEventListener("mousedown", function() {
 selectedTool="eraser";
 ctx.globalCompositeOperation="destination-out";
});
const colorPicker=document.getElementById("colorPicker");
colorPicker.addEventListener("input", function() {
 const color=this.value;
 ctx.strokeStyle=color;
});

結(jié)果：

在上面的示例中，繪圖應(yīng)用程序的功能被激活，您可以輕松地使用它來(lái)繪制您想要的內(nèi)容。請(qǐng)注意，現(xiàn)在所有的元素都在正常工作，您可以在畫布上繪制，選擇不同的繪圖工具（鉛筆、畫筆、橡皮擦），選擇顏色，調(diào)整畫筆大小，并清除畫布。

JavaScript代碼指定了HTML文檔中的畫布元素，獲取了2D繪圖上下文，并在HTML文檔的各個(gè)元素上設(shè)置了事件監(jiān)聽(tīng)器，例如畫布、按鈕、顏色樣本和輸入字段。這些事件監(jiān)聽(tīng)器響應(yīng)用戶的鼠標(biāo)點(diǎn)擊、移動(dòng)和值變化等操作。當(dāng)觸發(fā)時(shí)，相應(yīng)的JavaScript函數(shù)根據(jù)用戶的操作修改畫布繪圖上下文（ctx）。

它從HTML文檔中選擇清除按鈕并添加一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器。當(dāng)點(diǎn)擊時(shí)，它使用2D繪圖上下文的clearRect方法清除整個(gè)畫布。例如，當(dāng)您在畫布上點(diǎn)擊并拖動(dòng)鼠標(biāo)時(shí)，將調(diào)用 startDrawing 、 draw 和 stopDrawing 函數(shù)，這些函數(shù)跟蹤鼠標(biāo)坐標(biāo)并在畫布上繪制線條。

繪圖應(yīng)用的相關(guān)應(yīng)用

一款繪圖應(yīng)用程序允許您使用上述工具和功能創(chuàng)建數(shù)字藝術(shù)作品。它為用戶提供了一個(gè)畫布，可以繪制、繪畫和應(yīng)用不同的效果，以創(chuàng)建視覺(jué)組合。繪圖應(yīng)用程序被藝術(shù)家、設(shè)計(jì)師、愛(ài)好者和任何對(duì)通過(guò)創(chuàng)建視覺(jué)吸引人的插圖、繪畫、素描和其他數(shù)字藝術(shù)形式來(lái)表達(dá)創(chuàng)造力感興趣的人使用。

如何將HTML5畫布繪制保存為圖像文件

將HTML5畫布繪制保存為圖像文件可幫助您與他人分享繪畫或在其他應(yīng)用程序中使用。用戶可以將繪畫存儲(chǔ)在本地設(shè)備上，或通過(guò)提供將其保存為圖像文件的選項(xiàng)，將其上傳到各種平臺(tái)，如社交媒體、網(wǎng)站或在線畫廊。

此外，保存繪畫使用戶能夠稍后重新訪問(wèn)和展示他們的創(chuàng)作，增強(qiáng)了繪畫應(yīng)用程序的可用性和價(jià)值。以下是如何將HTML5畫布繪制保存為圖像文件的方法：使用JavaScript，您可以將畫布繪制保存為圖像文件。使用畫布元素的 toDataURL() 方法。該方法將畫布內(nèi)容轉(zhuǎn)換為數(shù)據(jù)URL，可用于創(chuàng)建圖像文件。例如：

<button id="saveButton">Save</button>

const canvas=document.getElementById('myCanvas');
const link=document.createElement('a');
function saveCanvasAsImage() {
 const dataURL=canvas.toDataURL('image/png');
 link.href=dataURL;
 link.download='drawing.png';
 link.click();
}
saveCanvasAsImage();

在上面的示例中，添加了一個(gè)具有id“saveButton”的新按鈕元素，并添加了一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器。當(dāng)您點(diǎn)擊“保存”按鈕時(shí)，它會(huì)觸發(fā)一個(gè)函數(shù)，該函數(shù)使用 toDataURL() 來(lái)檢索畫布的數(shù)據(jù)URL。然后，它創(chuàng)建一個(gè)動(dòng)態(tài)生成的鏈接元素，將數(shù)據(jù)URL設(shè)置為href屬性，并使用download屬性指定所需的文件名為“drawing.png”，以啟動(dòng)圖像文件下載。

如何以不同格式保存繪圖

該方法支持不同的圖像格式，如PNG、JPEG和GIF。您可以通過(guò)修改所需文件的類型（例如JPEG格式的'image/jpeg'）來(lái)更改格式。保存后，您可以通過(guò)電子郵件、消息應(yīng)用程序或社交媒體平臺(tái)分享圖像文件。

結(jié)束

利用HTML5畫布的繪圖應(yīng)用為藝術(shù)家、設(shè)計(jì)師、教育工作者和所有具有創(chuàng)造力的人打開(kāi)了無(wú)限的可能性。無(wú)論是作為獨(dú)立工具還是集成到其他應(yīng)用程序中，繪圖應(yīng)用都賦予用戶表達(dá)創(chuàng)造力、與他人分享作品和探索視覺(jué)表達(dá)的新領(lǐng)域的能力。憑借其豐富的功能，繪圖應(yīng)用在藝術(shù)創(chuàng)作中繼續(xù)激發(fā)和取悅用戶。所以拿起你的數(shù)字畫筆，在可能性的畫布上盡情釋放你的想象力吧！

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。