canvas是html5提供的一个用于在网页上绘制图形的标签，通过javascript控制，可用于绘图、动画和小游戏。1. 使用时首先在html中添加
Canvas，简单来说，就是HTML5提供的一个标签，让你可以在网页上画东西。你可以用JavaScript来控制它，画各种图形、图像，做动画，甚至搞一些小游戏。是不是听起来就挺有意思？
直接上干货，告诉你怎么用canvas：
-
HTML 准备： 首先，在你的HTML文件中添加
标签。就像这样：立即学习“前端免费学习笔记（深入）”；
id属性是为了方便你用JavaScript找到这个canvas元素。width和height定义了画布的尺寸，非常重要，直接影响到你画的东西的显示效果。 -
JavaScript 初始化： 接下来，用JavaScript获取canvas元素，并获取它的2D渲染上下文（context）。
var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');ctx对象就是你用来画东西的画笔，所有的绘图操作都通过它来进行。 -
开始画画： 现在，你可以用
ctx对象提供的各种方法来画东西了。比如，画一个矩形：ctx.fillStyle = 'red'; // 设置填充颜色为红色 ctx.fillRect(50, 50, 100, 80); // 画一个矩形，左上角坐标(50, 50)，宽度100，高度80
再比如，画一条线：
ctx.beginPath(); // 开始一个新的路径 ctx.moveTo(150, 50); // 移动画笔到(150, 50) ctx.lineTo(250, 100); // 画一条线到(250, 100) ctx.strokeStyle = 'blue'; // 设置线条颜色为蓝色 ctx.stroke(); // 绘制线条
注意，每次开始画新的图形之前，最好调用
beginPath()，避免之前的样式影响到新的图形。
Canvas 的性能优化技巧有哪些？
Canvas的性能确实是个需要注意的点，特别是当你做复杂动画或者处理大量图形的时候。
-
离屏渲染： 可以先在内存中创建一个临时的canvas（也就是离屏canvas），在这个canvas上完成所有的绘制操作，然后再将这个离屏canvas的内容一次性绘制到主canvas上。这样可以减少主canvas的重绘次数，提高性能。
var offscreenCanvas = document.createElement('canvas'); offscreenCanvas.width = canvas.width; offscreenCanvas.height = canvas.height; var offscreenCtx = offscreenCanvas.getContext('2d'); // 在 offscreenCanvas 上绘制 offscreenCtx.fillStyle = 'green'; offscreenCtx.fillRect(0, 0, 100, 100); // 将 offscreenCanvas 的内容绘制到主 canvas 上 ctx.drawImage(offscreenCanvas, 0, 0); 减少状态改变： Canvas的绘图操作会涉及到很多状态，比如
fillStyle、strokeStyle、lineWidth等等。频繁地改变这些状态会影响性能。所以，尽量将使用相同状态的绘图操作放在一起执行。使用requestAnimationFrame： 做动画的时候，不要使用
setInterval或者setTimeout，而应该使用requestAnimationFrame。requestAnimationFrame会根据浏览器的刷新频率来优化动画的执行，避免不必要的重绘，提高性能。避免浮点数坐标： Canvas在处理浮点数坐标的时候会进行额外的计算，影响性能。所以，尽量使用整数坐标。如果你需要使用浮点数坐标，可以考虑对坐标进行取整操作。
clearRect 优化：
clearRect方法用于清除canvas上的内容。如果你的canvas只需要清除一部分区域，那么就只清除这部分区域，不要清除整个canvas。
如何在 Canvas 中实现交互？
Canvas本身不具备DOM元素的事件处理能力，所以要实现交互，需要自己监听鼠标事件、键盘事件等，然后根据事件发生的位置来判断用户点击了哪个图形，或者按下了哪个按键。
-
监听鼠标事件： 可以监听
mousedown、mouseup、mousemove、click等鼠标事件。canvas.addEventListener('click', function(event) { var x = event.clientX - canvas.offsetLeft; var y = event.clientY - canvas.offsetTop; // 判断点击位置是否在某个图形内部 if (isPointInRect(x, y, rectX, rectY, rectWidth, rectHeight)) { // 用户点击了矩形 console.log('点击了矩形'); } }); function isPointInRect(x, y, rectX, rectY, rectWidth, rectHeight) { return x >= rectX && x <= rectX + rectWidth && y >= rectY && y <= rectY + rectHeight; } 监听键盘事件： 可以监听
keydown、keyup、keypress等键盘事件。注意，要让canvas能够接收键盘事件，需要先让canvas获得焦点。事件委托： 如果canvas上有大量的图形，那么为每个图形都绑定事件监听器会影响性能。可以使用事件委托，将事件监听器绑定到canvas上，然后根据事件发生的位置来判断用户操作了哪个图形。
使用库： 有一些JavaScript库可以简化Canvas的交互操作，比如Fabric.js、Konva.js等。这些库提供了更高级的API，可以方便地创建、操作图形，处理事件。
Canvas 和 SVG 有什么区别？ 什么时候应该用 Canvas，什么时候应该用 SVG？
Canvas和SVG都是在网页上绘制图形的技术，但它们有很大的区别。
- Canvas： 基于像素的位图。这意味着Canvas绘制出来的图形实际上是由一个个像素点组成的。当你放大Canvas的时候，会看到像素颗粒。Canvas的优点是性能好，适合做动画、游戏等需要频繁重绘的场景。缺点是可访问性差，不容易修改，因为一旦绘制完成，就很难单独修改某个图形。
- SVG： 基于矢量的图形。SVG绘制出来的图形实际上是由一系列的指令组成的，比如“画一条从A点到B点的直线”。当你放大SVG的时候，不会看到像素颗粒，图形依然清晰。SVG的优点是可访问性好，容易修改，因为每个图形都是一个DOM元素，可以单独修改样式、添加事件监听器。缺点是性能相对较差，不适合做复杂的动画。
什么时候应该用Canvas，什么时候应该用SVG？
-
Canvas：
- 需要高性能的场景，比如游戏、动画、数据可视化等。
- 图形数量非常多，DOM元素会影响性能的场景。
- 不需要频繁修改图形的场景。
-
SVG：
- 需要可访问性的场景，比如图表、地图等。
- 需要频繁修改图形的场景。
- 图形数量比较少，DOM元素不会影响性能的场景。
总的来说，Canvas和SVG各有优缺点，选择哪种技术取决于你的具体需求。如果你需要高性能，并且不需要频繁修改图形，那么Canvas是更好的选择。如果你需要可访问性，并且需要频繁修改图形，那么SVG是更好的选择。
