HTMLCanvas入门教程详解

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《HTML中Canvas使用教程》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

Canvas是HTML5提供的一个用于在网页上绘制图形的标签，通过JavaScript控制，可用于绘图、动画和小游戏。1. 使用时首先在HTML中添加标签并设置尺寸；2. 用JavaScript获取canvas元素及上下文ctx进行绘图操作；3. 可通过fillRect画矩形、moveTo/lineTo画线等方法实现图形绘制；4. 性能优化包括离屏渲染、减少状态改变、使用requestAnimationFrame、避免浮点坐标、优化clearRect区域；5. 实现交互需监听鼠标键盘事件，并判断点击位置是否在图形内；6. Canvas适合高性能需求场景如游戏动画，SVG则适合需要可访问性和频繁修改图形的场景。

Canvas，简单来说，就是HTML5提供的一个标签，让你可以在网页上画东西。你可以用JavaScript来控制它，画各种图形、图像，做动画，甚至搞一些小游戏。是不是听起来就挺有意思？

直接上干货，告诉你怎么用canvas：

1. HTML 准备： 首先，在你的HTML文件中添加标签。就像这样：

   

   id属性是为了方便你用JavaScript找到这个canvas元素。width和height定义了画布的尺寸，非常重要，直接影响到你画的东西的显示效果。

2. JavaScript 初始化： 接下来，用JavaScript获取canvas元素，并获取它的2D渲染上下文（context）。

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

   ctx对象就是你用来画东西的画笔，所有的绘图操作都通过它来进行。

3. 开始画画： 现在，你可以用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是更好的选择。

到这里，我们也就讲完了《HTMLCanvas入门教程详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于html,Canvas的知识点！