• Canvas是h5新增的一个标签
  • HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
  • 画布是一个矩形区域，您可以控制其每一像素。
  • canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 代码在vscode中不提示的解决办法

  1. /**@type{HTMLCanvasElement}*/

优化代码提示

canvas与svg的区别

  • canvas：
    • 依赖分辨率
    • 不支持事件处理器
    • 弱的文本渲染能力
    • 能够以 .png 或 .jpg 格式保存结果图像
    • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
  • svg：
    • 不依赖分辨率
    • 支持事件处理器
    • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
    • 复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）
    • 不适合游戏应用

      canvas基础方法

      canvas的画布大小需要在行间样式设置，用css设置的样式不是画布的大小
      getContext(“2d”) 设置面板
      moveTo() 线的起点
      lineTo() 线的终点终点
      stroke() 绘制一条线
      fill() 填充，使用填充就不需要stroke()来绘制啦
      beginPath() 重新开启一个路径来画线
      lineWidth = number 线宽，设置一次全局都是这个线宽，如果想让线的宽的不一致需要重新开启一个路径画线并重新规定线宽

画三角形

  1.         var canvas = document.getElementsByClassName('canvas')[0];
  2.         var ctx = canvas.getContext('2d');
  3.         ctx.moveTo(100,100); //起点
  4.         ctx.lineTo(200,100); 
  5.         ctx.lineTo(100,200)
  6.         ctx.closePath(); // 闭合
  7.         ctx.lineWidth = 10; // 加粗
  8.         ctx.stroke(); //渲染
  10.         ctx.beginPath(); // 重新开启一个路径
  11.         ctx.lineWidth = 1;
  12.         ctx.moveTo(110,120);
  13.         ctx.lineTo(160,120);
  14.         ctx.moveTo(110,120);
  15.         ctx.lineTo(110,160)
  16.         ctx.lineTo(160,120)
  17.         ctx.fill()

效果图
image.png