Canvas從入門到實戰(zhàn)

、什么是Canvas？

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

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

2、為什么使用Canvas？

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

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

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

3、Canvas的基本使用

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

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

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

3.1、畫布屬性：

width、height：畫布的寬度以及高度，默認大小為300x150；
fillStyle：填充圖形的樣式，值可以是color string、CanvasGradient對象；
strokeStyle：輪廓圖形的樣式，值可以是color string、CanvasGradient對象；
lineWidth：繪制線條的寬度；
globalAlpha：畫布的透明度，0-1的偏移值；
globalCompositeOperation：畫布中新老圖形重疊時的渲染方式，默認為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):繪制一個填充的矩形，矩形左上角的坐標為(x,y)，高寬分別為width、height；
.strokeRect(x,y,width,height):繪制一個矩形邊框，矩形左上角的坐標為(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()：開始一段路徑的繪制；
.closePath()：從起始點到當前點，結(jié)束路徑的繪制，非必需；
.fill()：根據(jù)路徑生成填充圖形；
.stroke()：通過路徑生成輪廓圖形；
.moveTo(x,y)：聲明一段路徑的起始點；
.lineTo(x,y)：繪制一條從當前坐標到(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() // 輪廓圖形不會根據(jù)從當前坐標到起始坐標生成輪廓，所以需要閉合路徑
ctx.stroke()

3.4、繪制圓?。?/span>

.arc(x,y,radius,startAngle,endAngle,anticlockwise)：畫一個以（x,y）為圓心的以 radius 為半徑的圓?。▓A），從 startAngle 開始到 endAngle 結(jié)束，按照 anticlockwise 給定的方向（默認為順時針，false）來生成;
arcTo(x1,y1,x2,y2,radius)：根據(jù)給定的兩條切線中的一組切點坐標生成半徑為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()


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

3.5、漸變對象：

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

創(chuàng)建好漸變對象之后，可以通過漸變對象上的.addColorStop(offset,color)為每一個漸變階段填充顏色，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對象、canvas元素、video元素；
.getImageData(x,y,width,height)：獲取坐標為(x,y)一定區(qū)域內(nè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)點對應的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()：將當前畫布的狀態(tài)推入到棧中，例如fillStyle、2D轉(zhuǎn)換等；
.restore()：將棧頂元素彈出，恢復上一次推入棧中畫布的狀態(tài)；

當我們需要通過空間轉(zhuǎn)換來繪制圖形時，保存與恢復畫布的狀態(tài)是很關(guān)鍵的，因為我們是在同一塊畫布上繪制圖形，而變換都是基于畫布的，這與我們平時使用到的CSS 2D轉(zhuǎn)換截然不同，所以我們在下一步繪制時要確認此時畫布的狀態(tài)是否是我們的理想狀態(tài)。

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


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

3.8、幾何變化：

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

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、綜合實戰(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();
  }


  // 時針刻度
  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();


  // 恢復之前的狀態(tài)再保存，時針、分針、秒針都是基于原點以及畫布方向變換后繪制
  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();


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


  ctx.restore(); // 恢復畫布最初狀態(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ā)展，用戶對頁面的視覺和交互有著越來越高的要求，傳統(tǒng)的web開發(fā)無法得到滿足，利用Canvas強大的繪圖能力，可以讓網(wǎng)頁顯示的內(nèi)容更加的豐富多彩，也能給用戶帶來更好的視覺體驗。

作者:LLS-FE團隊

來源:微信公眾號:流利說技術(shù)團隊

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

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

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

場景：
HTML5 Canvas可以應用于各種需要圖形繪制、動畫渲染和交互效果的場景，例如：

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

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

<!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()方法繪制了一個藍色的矩形，使用arc()方法繪制了一個紅色的圓形。最后，我們使用fill()方法填充了圓形的顏色。

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

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

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

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

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

HTML設(shè)置

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

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

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

繪圖應用的樣式設(shè)計

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

<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進行樣式設(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)建繪圖應用所需的結(jié)構(gòu)和樣式，包括工具欄（帶有不同工具的按鈕，如鉛筆、畫筆、橡皮擦）、顏色調(diào)色板、畫筆大小選擇下拉菜單、繪圖畫布、狀態(tài)欄和清除按鈕。您可以根據(jù)所需的功能自定義這些元素。

JavaScript 設(shè)置

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

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

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

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

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é)果：

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

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

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

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

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

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

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

此外，保存繪畫使用戶能夠稍后重新訪問和展示他們的創(chuàng)作，增強了繪畫應用程序的可用性和價值。以下是如何將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();

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

如何以不同格式保存繪圖

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

結(jié)束

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

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

在線咨詢

上一篇：不同的條件語句
下一篇：javy：將 JavaScript 轉(zhuǎn)化為 WebA

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

Canvas從入門到實戰(zhàn)

場景：HTML5 Canvas可以應用于各種需要圖形繪制、動畫渲染和交互效果的場景，例如：

代碼示例：以下是一個簡單的HTML5 Canvas代碼示例，用于在畫布上繪制一個矩形和一個圓形：

HTML設(shè)置

繪圖應用的樣式設(shè)計

JavaScript 設(shè)置

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

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

如何以不同格式保存繪圖

結(jié)束

您的項目需求

場景：
HTML5 Canvas可以應用于各種需要圖形繪制、動畫渲染和交互效果的場景，例如：

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