Canvas从入门到实战

、什么是Canvas？

HTML5 提供Canvas API，其本质上是一个DOM元素，可以看成是浏览器提供一块画布供我们在上面渲染2D或者3D图形。由于3D绘制上下文(webgl)目前在很多浏览器上兼容性较差，所以我们一般用于绘制2D图形。

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

2、为什么使用Canvas？

Canvas是HTML5引入的标签，在此之前我们通常会使用SVG来绘制一些图形，那么两者之间有什么区别呢？SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，两者部分区别：

SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局；而Canvas本身并不描述图像，而是通过Javascript完成绘制；
如上所述，SVG本身是DOM元素，每一个描述元素也是DOM元素，浏览器在进行渲染时需要进行大量计算以处理每一个元素；而在渲染Canvas的过程中，浏览器只需要渲染一张画布，其余的是通过Javascript引擎执行逻辑来绘制；
SVG(矢量图)不依赖分辨率，放大不会失真；而Canvas(位图)依赖分辨率，放大会失真；

由于Canvas是通过Javascript来完成绘制的，所以可控性很强，我们可以比较精确的控制图形渲染的每一帧；从另一方面来说，如果在高频率渲染中要处理过多的DOM元素就意味着性能一定不会太好，渲染速度会下降很多。Canvas的高性能能够保障复杂场景中图形的渲染效率，所以目前很多领域都会使用Canvas，例如动画、游戏图形、数据可视化、照片处理和实时视频处理等。

3、Canvas的基本使用

要使用Canvas，我们需要先获取Canvas元素的引用继而通过getContext()方法获取图形的绘制上下文。

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

获取到图形绘制上下文后，我们就能使用CanvasRenderingContext2D接口上的绘图API了，接下来我们可以了解一些比较常规的使用。

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):清除指定矩形区域，让清除部分完全透明;

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()：从起始点到当前点，结束路径的绘制，非必需；
.fill()：根据路径生成填充图形；
.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() // 轮廓图形不会根据从当前坐标到起始坐标生成轮廓，所以需要闭合路径
ctx.stroke()

3.4、绘制圆弧：

.arc(x,y,radius,startAngle,endAngle,anticlockwise)：画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针，false）来生成;
arcTo(x1,y1,x2,y2,radius)：根据给定的两条切线中的一组切点坐标生成半径为radius的圆弧;

注意：arc函数中的角度的单位是弧度而不是度，弧度=(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)：创建一个沿参数坐标指定的直线的渐变，开始坐标为(x1,y1)，结束坐标为(x2,y2)；
.createRadialGradient(x1, y1, r1, x2, y2, r2)：创建根据参数确定两个圆的坐标的放射性渐变，开始圆形圆心为(x1,y1)，半径为r1；结束圆形圆心为(x2,y2)，半径为r2；

创建好渐变对象之后，可以通过渐变对象上的.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)一定区域内图像的像素数据；

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、画布状态：

.save()：将当前画布的状态推入到栈中，例如fillStyle、2D转换等；
.restore()：将栈顶元素弹出，恢复上一次推入栈中画布的状态；

当我们需要通过空间转换来绘制图形时，保存与恢复画布的状态是很关键的，因为我们是在同一块画布上绘制图形，而变换都是基于画布的，这与我们平时使用到的CSS 2D转换截然不同，所以我们在下一步绘制时要确认此时画布的状态是否是我们的理想状态。

ctx.save() // 保存画布初始状态
ctx.translate(100,100) // 将画布原点转移至(100,100)
ctx.fillStyle='red'
ctx.fillRect(0,0,50,50)


ctx.restore() // 恢复画布状态，此时画布原点为(0,0)
ctx.fillStyle='blue'
ctx.fillRect(0,0,50,50)

3.8、几何变化：

.translate(x,y)：画布默认的原点是(0,0)，此方法可以切换原点到(x,y)而不需要手动更改绘制图形的坐标；
.rotate(angle)：将画布旋转一定的角度，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、综合实战

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(); // 保存画布初始状态


  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(); // 保存画布变换之后的状态


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


  // 恢复之前的状态再保存，时针、分针、秒针都是基于原点以及画布方向变换后绘制
  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(); // 恢复画布最初状态


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


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

5、小结

随着互联网的高速发展，用户对页面的视觉和交互有着越来越高的要求，传统的web开发无法得到满足，利用Canvas强大的绘图能力，可以让网页显示的内容更加的丰富多彩，也能给用户带来更好的视觉体验。

作者:LLS-FE团队

来源:微信公众号:流利说技术团队

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

TML5 Canvas是HTML5新增的一个元素，它提供了一个可执行JavaScript脚本绘制图形的区域。Canvas元素通过使用JavaScript API，可以在浏览器上绘制图形、渲染动画和实现交互效果等。

使用原理：
HTML5 Canvas通过使用JavaScript API在浏览器中创建一块画布（Canvas），然后可以使用脚本语言（通常是JavaScript）在画布上绘制各种形状、线条、图像和文本等。Canvas使用像素渲染，可以直接操作像素数据，因此在性能方面相比其他图形技术（如SVG）更具优势。

场景：
HTML5 Canvas可以应用于各种需要图形绘制、动画渲染和交互效果的场景，例如：

游戏开发：Canvas可以用来开发2D或3D游戏，通过绘制游戏场景、角色和动画等实现游戏效果。
数据可视化：Canvas可以用来绘制各种图表和图形，实现数据可视化效果。
图像处理：Canvas可以对图像进行像素级别的操作，实现图像处理功能，例如滤镜、裁剪和合成等。
实时视频处理：Canvas可以结合WebRTC等技术实现实时视频处理，例如在视频通话中添加特效和滤镜等。

代码示例：
以下是一个简单的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()方法填充了圆形的颜色。

载说明：原创不易，未经授权，谢绝任何形式的转载

使用HTML5 Canvas构建绘图应用是在Web浏览器中创建交互式和动态绘图体验的绝佳方式。HTML5 Canvas元素提供了一个绘图表面，允许您操作像素并以编程方式创建各种形状和图形。本文将为您提供使用HTML5 Canvas创建绘图应用的概述和指导。此外，它还将通过解释HTML设置、JavaScript实现、用户交互和绘图功能来帮助您理解构建绘图应用的步骤。

HTML canvas标签是一个HTML元素，它提供了一个空白的绘图表面，可以使用JavaScript来渲染图形、形状和图像。绘图应用程序利用HTML5 canvas的功能，使用户能够以数字方式创建艺术作品、草图和插图。此外，使用HTML5 canvas构建的绘图应用程序允许用户与画布进行交互，捕捉鼠标移动和点击事件，实时绘制、擦除或操作元素。

HTML5画布非常适合创建绘图应用程序，原因如下：

它提供了一个动态的绘图界面，可以实时更新。
它提供了丰富的绘图API，用于创建各种绘图工具和功能。
现代网络浏览器的原生支持。
支持交互和事件处理，用于捕获用户输入。
启用动画和特效，让绘画栩栩如生。
允许图像操作，包括加载、显示和转换图像。

HTML设置

您可以使用HTML5 Canvas以以下方式为绘图应用程序设置HTML结构：

在代码编辑器中创建一个新的HTML文件或打开一个已存在的文件。
从基本的HTML结构开始，通过包含 <!DOCTYPE html> 声明，打开 <html> 标签，并添加 <head> 和 <body> 部分。
在 <head> 部分，您可以设置应用程序的标题并包含任何必要的CSS样式或外部库。
在 <body> 部分中添加一个 <canvas> 元素，它将作为应用程序的绘图表面。您可以指定所需的宽度和高度属性来定义画布的尺寸。
在 <canvas> 元素下面，您可以添加任何其他的HTML元素，以便在您的绘图应用程序中使用，比如按钮、颜色选择器或工具栏。
您可以根据需求自定义HTML结构，添加任何必要的元素、样式和ID以供绘图应用程序使用。以下是绘图应用程序的基本HTML设置示例：

<!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>

结果：

在上面的示例中，我们通过添加带有ID为“myCanvas”的画布元素并分别指定其宽度和高度为700和400像素来构建了绘图应用程序的HTML结构。我们还在画布下方包含了一个ID为“clearButton”的“清除”按钮，为用户提供了一种方便的方式来从画布中删除所有绘制的元素，并为新的绘图创建一个空白画布。

绘图应用的样式设计

添加一些元素和功能，使用额外的HTML和CSS使绘图应用程序看起来更像一个应用程序。例如，您可以添加一个工具栏、一个颜色调色板、一个画笔大小和一个状态栏。以下是一个示例，其中包含一些额外的元素，以增强绘图应用程序的外观和布局：

<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进行样式设置：

.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;
}

结果：

上面的例子包括了创建绘图应用所需的结构和样式，包括工具栏（带有不同工具的按钮，如铅笔、画笔、橡皮擦）、颜色调色板、画笔大小选择下拉菜单、绘图画布、状态栏和清除按钮。您可以根据所需的功能自定义这些元素。

JavaScript 设置

没有JavaScript功能，上述示例中的按钮、颜色样本和清除按钮将不会执行任何操作。要使用绘图应用程序，您必须添加相应的JavaScript源代码来处理功能和与画布元素的交互。以下是您可以使用JavaScript处理画布元素功能和交互的几种方式：

你需要使用canvas元素的ID在JavaScript中访问它，并获取绘图上下文。绘图上下文提供了在canvas上绘制的方法。
要做到这一点，请在 <script> 标签内添加以下JavaScript代码：

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

为了启用绘图功能，您必须处理用户交互，如鼠标点击和移动。
将事件监听器附加到画布元素以捕获 mousedown 、 mousemove 、 mouseup 和 mouseout 事件。
使用 mousedown 事件开始绘制，使用 mousemove 事件在鼠标移动时绘制，使用 mouseup 事件在释放鼠标按钮时停止绘制，使用 mouseout 事件在光标移出画布时停止绘制。
要实现绘图的事件处理函数，请使用 startDrawing 、 last position 和 stopDrawing 。
startDrawing 设置绘图标志并保存起始位置， draw 根据鼠标移动从上一位置到当前位置绘制线条， stopDrawing 重置绘图标志。
要初始化变量以跟踪绘图状态，请使用 isDrawing 、 lastX 和 lastY 。它们可以跟踪绘图状态和光标或指针的先前坐标。
变量 isDrawing 是一个布尔标志，指示用户当前是否正在绘制，而 lastX 和 lastY 存储光标或指针的先前坐标，使得可以在画布上绘制平滑且连续的线条。以下是如何使用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;
});

结果：

在上面的示例中，绘图应用程序的功能被激活，您可以轻松地使用它来绘制您想要的内容。请注意，现在所有的元素都在正常工作，您可以在画布上绘制，选择不同的绘图工具（铅笔、画笔、橡皮擦），选择颜色，调整画笔大小，并清除画布。

JavaScript代码指定了HTML文档中的画布元素，获取了2D绘图上下文，并在HTML文档的各个元素上设置了事件监听器，例如画布、按钮、颜色样本和输入字段。这些事件监听器响应用户的鼠标点击、移动和值变化等操作。当触发时，相应的JavaScript函数根据用户的操作修改画布绘图上下文（ctx）。

它从HTML文档中选择清除按钮并添加一个点击事件监听器。当点击时，它使用2D绘图上下文的clearRect方法清除整个画布。例如，当您在画布上点击并拖动鼠标时，将调用 startDrawing 、 draw 和 stopDrawing 函数，这些函数跟踪鼠标坐标并在画布上绘制线条。

绘图应用的相关应用

一款绘图应用程序允许您使用上述工具和功能创建数字艺术作品。它为用户提供了一个画布，可以绘制、绘画和应用不同的效果，以创建视觉组合。绘图应用程序被艺术家、设计师、爱好者和任何对通过创建视觉吸引人的插图、绘画、素描和其他数字艺术形式来表达创造力感兴趣的人使用。

如何将HTML5画布绘制保存为图像文件

将HTML5画布绘制保存为图像文件可帮助您与他人分享绘画或在其他应用程序中使用。用户可以将绘画存储在本地设备上，或通过提供将其保存为图像文件的选项，将其上传到各种平台，如社交媒体、网站或在线画廊。

此外，保存绘画使用户能够稍后重新访问和展示他们的创作，增强了绘画应用程序的可用性和价值。以下是如何将HTML5画布绘制保存为图像文件的方法：使用JavaScript，您可以将画布绘制保存为图像文件。使用画布元素的 toDataURL() 方法。该方法将画布内容转换为数据URL，可用于创建图像文件。例如：

<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”的新按钮元素，并添加了一个点击事件监听器。当您点击“保存”按钮时，它会触发一个函数，该函数使用 toDataURL() 来检索画布的数据URL。然后，它创建一个动态生成的链接元素，将数据URL设置为href属性，并使用download属性指定所需的文件名为“drawing.png”，以启动图像文件下载。

如何以不同格式保存绘图

该方法支持不同的图像格式，如PNG、JPEG和GIF。您可以通过修改所需文件的类型（例如JPEG格式的'image/jpeg'）来更改格式。保存后，您可以通过电子邮件、消息应用程序或社交媒体平台分享图像文件。

结束

利用HTML5画布的绘图应用为艺术家、设计师、教育工作者和所有具有创造力的人打开了无限的可能性。无论是作为独立工具还是集成到其他应用程序中，绘图应用都赋予用户表达创造力、与他人分享作品和探索视觉表达的新领域的能力。凭借其丰富的功能，绘图应用在艺术创作中继续激发和取悦用户。所以拿起你的数字画笔，在可能性的画布上尽情释放你的想象力吧！

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

在线咨询

上一篇：不同的条件语句
下一篇：javy：将 JavaScript 转化为 WebA