前端系列——Canvas

白嫖圣手fly
239 阅读1分钟

Canvas

canvas的用途有很多，常用于绘制各类图形，如我们常用的Echarts就是使用canvas构建的

说明

canvas的默认大小为长：300px，宽：150px

属性与方法

参考手册：https://www.w3school.com.cn/tags/html_ref_canvas.asp

颜色、样式和阴影

在这里插入图片描述 在这里插入图片描述

线条样式

在这里插入图片描述

矩形

在这里插入图片描述

路径

在这里插入图片描述

转换

在这里插入图片描述

文本

在这里插入图片描述

图像绘制

在这里插入图片描述

像素操作

在这里插入图片描述

合成

在这里插入图片描述

其他

在这里插入图片描述

实例

绘制线段

<!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 width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    //设置线条的起点
    context.moveTo(0, 0)
    //设置终点
    context.lineTo(600, 520)
    //绘制线条（描边方式）
    context.stroke()
  </script>
</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>
  </head>
  <body>
    <canvas width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    //设置线条的起点
    context.moveTo(0, 0)
    //设置拐点
    context.lineTo(600, 520)
    //设置终点
    context.lineTo(800, 260)
    //绘制线条（描边方式）
    context.stroke()
  </script>
</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>
  </head>
  <body>
    <canvas width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    //设置线条的起点
    context.moveTo(0, 0)
    //设置终点
    context.lineTo(0, 200)
    context.lineTo(200, 200)
    context.lineTo(200, 0)
    context.lineTo(0, 0)
    //绘制线条（描边方式）
    context.stroke()
  </script>
</html>


我们也可以使用
context.closePath()
对起点和终点进行连接

在这里插入图片描述

调用API

<!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 width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    context.rect(20, 20, 300, 200)

    //绘制线条（描边方式）
    context.stroke()
  </script>
</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>
  </head>
  <body>
    <canvas width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    //设置线条的起点
    context.moveTo(100, 0)
    //设置终点
    context.lineTo(0, 100)
    context.lineTo(200, 100)
    context.lineTo(100, 0)
    //绘制线条（描边方式）
    context.stroke()
  </script>
</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>
  </head>
  <body>
    <canvas width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    //最后一个参数是绘制方向：true顺时针，false逆时针
    context.arc(200, 200, 80, (Math.PI / 180) * 0, (Math.PI / 180) * 360, true)

    //绘制线条（描边方式）
    context.stroke()
  </script>
</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>
  </head>
  <body>
    <canvas width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    //设置画笔移动到圆心
    context.moveTo(200, 200)
    //最后一个参数是绘制方向：true顺时针，false逆时针
    context.arc(200, 200, 80, (Math.PI / 180) * 0, (Math.PI / 180) * 90, false)
    //设置闭合
    context.closePath()
    //绘制线条（描边方式）
    context.stroke()
  </script>
</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>
  </head>
  <body>
    <canvas width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    context.font = '18px sans-serif'
    context.strokeStyle = '#dd00df'
    context.fillStyle = '#dd00df'
    context.fillText('测试文字1', 100, 100, 200)

    //绘制线条（描边方式）
    context.stroke()
  </script>
</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>
  </head>
  <body>
    <canvas width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    //设置网格大小
    //设置网格间距为30px
    let gridSpace = 30
    //循环创建线条
    for (let i = 0; i < 600; i += gridSpace) {
      //设置单独域
      context.beginPath()
      //设置起点
      context.moveTo(0, i)
      //设置终点
      context.lineTo(1000, i)
      //绘制线条（描边方式）
      context.stroke()
    }
    //循环创建线条
    for (let i = 0; i < 1000; i += gridSpace) {
      //设置单独域
      context.beginPath()
      //设置起点
      context.moveTo(i, 0)
      //设置终点
      context.lineTo(i, 600)
      //绘制线条（描边方式）
      context.stroke()
    }
  </script>
</html>

在这里插入图片描述

绘制图片

使用drawImage函数

<!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 width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    const image = new Image()
    image.src = './111.png'
    image.onload = () => {
      alert('图片加载完成')
      context.drawImage(image, 50, 50, 500, 340)
    }

  </script>
</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>
  </head>
  <body>
    <canvas width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    context.beginPath()

    //设置起点
    context.moveTo(20, 250)
    //绘制曲线
    context.quadraticCurveTo(150, 200, 360, 300)

    context.stroke()
  </script>
</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>
  </head>
  <body>
    <canvas width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let ctx = canvas.getContext('2d')
    ctx.strokeStyle = '#1572b5'
    ctx.lineWidth = 2
    ctx.beginPath()
    ctx.moveTo(150, 250)
    ctx.bezierCurveTo(170, 41, 434, 53, 450, 250)
    ctx.stroke()
    ctx.closePath()
  </script>
</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>
  </head>
  <body>
    <canvas width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let ctx = canvas.getContext('2d')
    //线性渐变,设置方向
    let col = ctx.createLinearGradient(0, 0, 300, 0)
    //添加渐变色，数值表示占比，1是最大值
    col.addColorStop(0.2, 'red')
    col.addColorStop(0.5, 'yellow')
    col.addColorStop(0.8, 'blue')
    ctx.fillStyle = col
    ctx.fillRect(100, 100, 300, 600)
  </script>
</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>
  </head>
  <body>
    <canvas width="1000" height="600" id="ca"></canvas>
  </body>
  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let ctx = canvas.getContext('2d')
    //径向渐变
    /*参数1：内部圆心横坐标
     * 参数2:内部圆心纵坐标
     * 参数3：内圆半径
     * 参数4：外部圆心横坐标
     * 参数5：外部圆心纵坐标
     * 参数6：外部圆半径
     */
    let col = ctx.createRadialGradient(300, 300, 150, 300, 300, 260)

    //添加渐变色，数值表示占比，1是最大值
    col.addColorStop(0.2, 'red')
    col.addColorStop(0.5, 'yellow')
    col.addColorStop(0.8, 'blue')
    ctx.fillStyle = col
    ctx.fillRect(100, 100, 300, 600)
  </script>
</html>

在这里插入图片描述

清空绘制内容

清空固定区域

  <script>
    let canvas = document.getElementById('ca')
    //获取画布上下文对象
    let context = canvas.getContext('2d')
    context.clearRect(0, 0, 1000, 600)
  </script>
avatar
文章
阅读
粉丝