知识库

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <canvas id="canvas">
    <!-- 后备内容，浏览器仅在不支持 canvas 元素的时候，才会显示该内容。 -->
    Canvas not supported
  </canvas>

  <script>
    // 设置 canvas 宽高，默认为300 * 150。
    canvas.width = 300
    canvas.height = 150

    // canvas 不设置背景色时，默认背景色与其父元素的背景色一致。
    canvas.style.background = '#ddd'

    // 获取绘图环境对象
    context = canvas.getContext('2d')

    // 设置环境对象的 font
    context.font='32px Arial'

    // fillText() 方法使用 fillStyle 属性来填充文本中的字符
    // strokeText() 方法使用 strokeStyle 属性来描绘字符的轮廓线
    // fillStyle与strokeStyle 属性可以是 CSS 格式的颜色、渐变色或是图案。
    context.fillStyle='green'
    context.strokeStyle='blue'

    // 要绘制的文本内容，以及在canvas中显示文本的横、纵坐标
    context.fillText('Hello Canvas', 0, 50)
    context.strokeText('Hello Canvas',0, 100)
  </script>
</body>
</html>