canvas初始（一）

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」

1, canvas简介

HTML5中的<canvas>元素是用于图形的绘制，通过JavaScript脚本来完成。 <canvas>标签是图形容器，必须使用JavaScript脚本来绘制图形，通过脚本你可以绘制路径，盒，圆，字符，图像等等。

2, canvas使用

在浏览器中使用<canvas>标签即可

<canvas width="300", height="300">
 您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>

注意：如果浏览器支持canvas, 就不会显示文字。

画布的大小，需要通过width和height去指定
canvas不能直接使用：margin: 0 auto; 进行居中，如果需要居中，可以通过控制父元素，也可以通过设置display:block

3, canvas步骤

1，获取画布

2，获取画布的上下文

3，开启一条路径

4，确定起点

5，确定终点

6，添加颜色

7，结束路径

(1) 画一条直线，多次之后，生成三角形

<!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>Canvas-01</title>
  <style>
    canvas {
      margin: 0 auto;
      border: 1px solid red;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500px" height="500px">
    您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
  </canvas>
</body>
<script>
  // 获取canvas标签
  var canvas = document.getElementById('canvas')
  // 获取canvas上下文对象，可理解为：使用画布的权限
  var context = canvas.getContext('2d')
  // 如果画一条直线，首先开启一条路径
  context.beginPath()
  // 确认起始点
  context.moveTo(100, 100)
  // 到哪里去，确定结束点
  context.lineTo(250, 250)
  context.lineTo(100,250);
  context.lineTo(100,100);
  // 给直线上色， 上色之前，可以设置直线颜色，线宽
  context.strokeStyle = "green"
  context.lineWidth = 5;
  context.stroke()
  // 关闭路径
  context.closePath()
</script>
</html>

注意： lineTo可以多次使用，那就可以绘制出多种多样的多边形

（2）画一个多彩正方形

<!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>Canvas-01</title>
<style>
  canvas {
    margin: 0 auto;
    border: 1px solid red;
    display: block;
  }
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
  您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>
</body>
<script>
// 获取canvas标签
var canvas = document.getElementById('canvas')
// 获取canvas上下文对象，可理解为：使用画布的权限
var context = canvas.getContext('2d')
// 如果画一条直线，首先开启一条路径
context.beginPath()
// 确认起始点
context.moveTo(100, 100)
// 到哪里去，确定结束点
context.lineTo(250, 250)
context.lineTo(20,100);
// 给直线上色， 上色之前，可以设置直线颜色，线宽
context.strokeStyle = "green"
context.lineWidth = 5;
context.stroke()
// 关闭路径
context.closePath()
</script>
</html>

（3）画两条虚线

通过for循环实现

<!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>虚线</title>
  <style>
    canvas {
      margin: 0 auto;
      border: 1px solid red;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500px" height="500px">
    您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
  </canvas>
</body>
<script>
  // 获取canvas标签
  var canvas = document.getElementById('canvas')
  // 获取canvas上下文对象，可理解为：使用画布的权限
  var context = canvas.getContext('2d')
  // 两条虚线
  for(var i= 0; i < 30; i++) {
    drawLine(100 + 10 * i, 100, 105 + 10 * i, 100, 'red', 5)
  }
  for(var i= 0; i < 30; i++) {
    drawLine(100 + 10 * i, 100 + 10 * i, 105 + 10 * i, 100 + 10 * i, 'green', 5)
  }
  function drawLine(x1, y1, x2, y2, color, width) {
    context.beginPath() // 如果画一条直线，首先开启一条路径
    context.moveTo(x1, y1) // 确认起始点   
    context.lineTo(x2, y2) // 到哪里去，确定结束点
    // 给直线上色， 上色之前，可以设置直线颜色，线宽
    context.strokeStyle = color
    context.lineWidth = width;
    context.stroke()
    context.closePath() // 关闭路径
  }
</script>
</html>

4, 多彩矩形

首先，画一个矩形

# 四个参数, 分别表示：x轴的位置， y轴坐标， 宽度， 高度范围，
fillRect(x, y, width, height)

其次，随机一个颜色

 context.fillStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16)

最后，随机一个高度

for(var i =0; i < 6; i++) {
    var height = Math.random() * 280 + 10
    context.fillStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16)
    context.fillRect(120 + 40 * i, 400 - height, 20, height)
 }

完整代码：

<!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>多彩矩形</title>
  <style>
    canvas {
      margin: 0 auto;
      border: 1px solid red;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500px" height="500px">
    您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
  </canvas>
</body>
<script>
  // 获取canvas标签
  var canvas = document.getElementById('canvas')
  // 获取canvas上下文对象，可理解为：使用画布的权限
  var context = canvas.getContext('2d')
  // 固定-end
  // 画坐标系
  context.beginPath();
  context.moveTo(100, 100)
  context.lineTo(100, 400)
  context.lineTo(400, 400)
  context.stroke()
  context.closePath()

  // 画矩形
  // context.fillStyle  = 'red'
  // x轴的位置， y轴坐标， 宽度， 高度范围， 
  // context.fillRect(200, 0, 20, 200)
  for(var i =0; i < 6; i++) {
    var height = Math.random() * 280 + 10
    context.fillStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16)
    context.fillRect(120 + 40 * i, 400 - height, 20, height)
  }
</script>
</html>

效果如下图：