Canvas入门

2022/4/19 23:13:54

编程Tag： 浏览器 canvas 路径入门着色画布 ctx

本文主要是介绍Canvas入门，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

使用Canvas

在浏览器中使用canvas，只用引入<canvas>标签即可！

注意：

在canvas标签中写入文字，如果浏览器支持就不会显示文字，不支持的话，就会显示文字
指定画布大小：直接在标签中指定width和height即可
对于canvas来说，不能直接使用margin: 0 auto;进行居中。如果需要居中，可以给他添加一个父元素，让父元素居中。

<!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>
</head>
<body>
  <!-- canvas在低版本中不兼容，需要给用户提示信息 -->
  <canvas width="500px" height="600px">
    您的浏览器版本过低，请升级浏览器或使用Chrome浏览器
  </canvas>
</body>
</html>

在canvas中画直线

步骤如下：

获取画布
获取画布的上下文
开始一条路径
确定起始点
确定结束点
着色
结束路径

<!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>
    canvas {
      border: 2px solid black;
      display: block;
    }
  </style>
</head>
<body>
  <!-- canvas在低版本中不兼容，需要给用户提示信息 -->
  <canvas id="canvas" width="800px" height="600px">
    您的浏览器版本过低，请升级浏览器或使用Chrome浏览器
  </canvas>

  <script>
    // canvas只能使用原生js
    // 1. 获取画布
    var canvas = document.querySelector("#canvas")
    // 2. 获取画布的上下文
    var ctx = canvas.getContext('2d')
    // 3. 开始一条路径
    ctx.beginPath()
    // 4. 确定起始点
    ctx.moveTo(100, 100)
    // 5. 确定结束点
    ctx.lineTo(400, 400)
    // 6. 着色
    ctx.stroke()
    // 7. 结束路径
    ctx.closePath()
  </script>
</body>
</html>

getContext('2d')对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。这里只有“2d”属性，没有“3d”。

此外，还可以设置直线的颜色与宽度
设置颜色一定要在着色之前

// 设置颜色
// 在着色之前设置
ctx.strokeStyle = '#ff0000'
// 设置线宽
ctx.lineWidth = 5

这篇关于Canvas入门的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Canvas入门

使用Canvas

在canvas中画直线

相关编程文章