canvas基础

基础画布

<!-- 
  id:标识元素的唯一性
  width:画布的宽度
  height:画布的高度
-->
<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  console.log('ctx :>> ', ctx)
  // 3.绘制图形
  // 3.1绘制矩形 .fillRect(位置x,位置y,宽度,高度)
  ctx.fillRect(100, 100, 100, 100)
</script>

填充与路径绘制

<canvas id="c2" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>

<script>
  var c2 = document.getElementById('c2')
  var ctx = c2.getContext('2d')
  console.log('ctx :>> ', ctx)
  // 填充矩形
  // ctx.fillRect(100, 100, 200, 120)
  // 矩形路径 strokeRect(x1, y1, width, height)
  // ctx.strokeRect(100, 100, 200, 100)

  // 拆开写
  // ctx.rect(100, 100, 200, 120) // 绘制路径
  // ctx.fill() // 填充颜色

  // 拆开路径绘制
  ctx.rect(100, 100, 200, 120) // 绘制路径
  ctx.stroke() // 填充颜色
</script>

矩形绘制-清除模式

<canvas id="c2" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>

<script>
  var c2 = document.getElementById('c2')
  var ctx = c2.getContext('2d')
  console.log('ctx :>> ', ctx)
  // 填充矩形
  // ctx.fillRect(100, 100, 200, 120)
  // 矩形路径 strokeRect(x1, y1, width, height)
  // ctx.strokeRect(100, 100, 200, 100)
  // ctx.fillRect(200, 150, 200, 100)

  /************ 拆开写 *************/
  // beginPath 和 closePath 可以完成路径分段
  ctx.beginPath() // 开始画笔
  ctx.rect(200, 150, 200, 100) // 绘制矩形
  ctx.stroke() // 显示路径
  ctx.closePath() // 结束画笔

  ctx.beginPath()
  ctx.rect(100, 100, 200, 100) // 绘制矩形
  ctx.fill() // 填充矩形
  ctx.closePath()

  // 定时器清除
  let height = 0
  let setV = setInterval(() => {
    height++
    ctx.clearRect(0, 0, c2.clientWidth, height)
    if (height > c2.clientHeight) {
      clearInterval(setV)
    }
  }, 10)
</script>

圆弧

<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形
  // 3.1绘制圆弧 ctx.arc(圆心x,圆心y,半径,开始的角度,结束的角度,顺时针还是逆时针，默认是顺时针为false)
  ctx.arc(300, 200, 50, 0, Math.PI * Math.random(), true)
  ctx.stroke()
  // ctx.fill()
</script>

使用圆弧绘制笑脸

<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形
  // 3.1绘制圆弧 ctx.arc(圆心x,圆心y,半径,开始的角度,结束的角度,顺时针还是逆时针)
  // 第六个参数：顺时针还是逆时针，默认是顺时针为false，可以省略不写

  // 绘制脸
  ctx.beginPath()
  ctx.arc(75, 75, 50, 0, Math.PI * 2)
  ctx.stroke()
  ctx.closePath()
  // 绘制嘴巴
  ctx.beginPath()
  ctx.arc(75, 75, 35, 0, Math.PI)
  ctx.stroke()
  ctx.closePath()
  // 绘制眼睛-左
  ctx.beginPath()
  ctx.arc(60, 60, 5, 0, Math.PI * 2)
  ctx.stroke()
  ctx.closePath()
  // 绘制眼睛-右
  ctx.beginPath()
  ctx.arc(90, 60, 5, 0, Math.PI * 2)
  ctx.stroke()
  ctx.closePath()
</script>

使用moveTo来移动点

<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形
  // 3.1绘制圆弧 ctx.arc(圆心x,圆心y,半径,开始的角度,结束的角度,顺时针还是逆时针)
  // 第六个参数：顺时针还是逆时针，默认是顺时针为false，可以省略不写

  // 绘制脸
  ctx.beginPath()
  ctx.arc(75, 75, 50, 0, Math.PI * 2)
  ctx.moveTo(110, 75)
  // 绘制嘴巴
  ctx.arc(75, 75, 35, 0, Math.PI)
  ctx.moveTo(65, 65)
  // 绘制眼睛-左
  ctx.arc(60, 60, 5, 0, Math.PI * 2)
  // 绘制眼睛-右
  ctx.moveTo(95, 65)
  ctx.arc(90, 60, 5, 0, Math.PI * 2)
  ctx.stroke()
  ctx.closePath()
</script>

绘制线段

<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形

  ctx.beginPath()
  ctx.moveTo(300, 200)
  // lineTo(x,y) 绘制一条从当前位置x以及y位置的直线
  ctx.lineTo(350, 250)
  ctx.stroke()
  ctx.closePath()
</script>

绘制三角形

<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形

  ctx.beginPath()
  ctx.lineTo(300, 200)
  ctx.lineTo(350, 250)
  ctx.lineTo(350, 200)
  ctx.lineTo(300, 200)

  ctx.stroke()
  ctx.closePath()

  ctx.beginPath()
  ctx.lineTo(200, 100)
  ctx.lineTo(250, 150)
  ctx.lineTo(250, 100)
  ctx.lineTo(200, 100)
  ctx.fill() // 填充颜色
  ctx.stroke()
  ctx.closePath()
</script>

arcTo绘制圆弧方式

<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形

  ctx.beginPath()

  // 第一个点
  ctx.moveTo(300, 200)
  // 第二个点和第三个，以及圆弧的半径
  ctx.arcTo(300, 250, 250, 250, 25)

  ctx.stroke()
  ctx.closePath()
</script>

二次贝塞尔曲线实现聊天气泡框

<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形
  ctx.moveTo(200, 300)
  ctx.quadraticCurveTo(150, 300, 150, 200)
  ctx.quadraticCurveTo(150, 100, 300, 100)
  ctx.quadraticCurveTo(450, 100, 450, 200)
  ctx.quadraticCurveTo(450, 300, 250, 300)
  ctx.quadraticCurveTo(250, 350, 150, 350)
  ctx.quadraticCurveTo(200, 350, 200, 300)

  ctx.stroke()
</script>

三次贝塞尔曲线实现爱心

<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  /** @type {HTMLCanvasElement} */
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形'
  ctx.beginPath()
  // 起点
  ctx.moveTo(300, 200)
  // 两个控制点，一个重点
  ctx.bezierCurveTo(350, 150, 400, 200, 300, 250)
  ctx.bezierCurveTo(200, 200, 250, 150, 300, 200)

  ctx.stroke()
  ctx.closePath()
</script>

封装路径

 <canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  /** @type {HTMLCanvasElement} */
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形'
  var heartPath = new Path2D()
  console.log('heartPath :>> ', heartPath)
  // 起点
  heartPath.moveTo(300, 200)
  // 两个控制点，一个重点
  heartPath.bezierCurveTo(350, 150, 400, 200, 300, 250)
  heartPath.bezierCurveTo(200, 200, 250, 150, 300, 200)
  ctx.stroke(heartPath)
  ctx.fill(heartPath)

  // 绘制聊天框
  var chatPaht = new Path2D()
  chatPaht.moveTo(200, 300)
  chatPaht.quadraticCurveTo(150, 300, 150, 200)
  chatPaht.quadraticCurveTo(150, 100, 300, 100)
  chatPaht.quadraticCurveTo(450, 100, 450, 200)
  chatPaht.quadraticCurveTo(450, 300, 250, 300)
  chatPaht.quadraticCurveTo(250, 350, 150, 350)
  chatPaht.quadraticCurveTo(200, 350, 200, 300)
  ctx.stroke(chatPaht)

  // 创建折线 开始坐标 高度，宽度 高度 z回到初始坐标
  var polyline = new Path2D('M10 10 h 80 v 80 h -80 z')
  ctx.stroke(polyline)
</script>

颜色设置

<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  /** @type {HTMLCanvasElement} */
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形

  // 设置全局透明度
  ctx.globalAlpha = 0.5

  // 绘制爱心
  var heartPath = new Path2D()
  heartPath.moveTo(300, 200)
  heartPath.bezierCurveTo(350, 150, 400, 200, 300, 250)
  heartPath.bezierCurveTo(200, 200, 250, 150, 300, 200)
  ctx.stroke(heartPath)
  ctx.fill(heartPath)

  // 绘制聊天框
  var chatPaht = new Path2D()
  chatPaht.moveTo(200, 300)
  chatPaht.quadraticCurveTo(150, 300, 150, 200)
  chatPaht.quadraticCurveTo(150, 100, 300, 100)
  chatPaht.quadraticCurveTo(450, 100, 450, 200)
  chatPaht.quadraticCurveTo(450, 300, 250, 300)
  chatPaht.quadraticCurveTo(250, 350, 150, 350)
  chatPaht.quadraticCurveTo(200, 350, 200, 300)
  ctx.strokeStyle = 'green'
  ctx.strokeStyle = '#ff00ff'
  ctx.stroke(chatPaht)
  ctx.fillStyle = 'rgba(255, 200, 200, 0.3)'

  // 创建折线 开始坐标 高度，宽度 高度 z回到初始坐标
  let polyline = new Path2D('M10 10 h 80 v 80 h -80 z')
  // 设置图像颜色
  ctx.strokeStyle = 'red'
  // 绘制图像
  ctx.stroke(polyline)

  ctx.fillRect(280, 180, 100, 40)
  ctx.fillStyle = '#de4336'
</script>

线性渐变

<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  /** @type {HTMLCanvasElement} */
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形
  // 创建绘制线性渐变 createLinearGradient(x0: number, y0: number, x1: number, y1: number)
  // let linearGradient = ctx.createLinearGradient(0, 0, 600, 600)
  // // 添加颜色 addColorStop(offset: number, color: string)
  // linearGradient.addColorStop(0, 'red')
  // // linearGradient.addColorStop(0.5, 'blue')
  // // linearGradient.addColorStop(0.8, 'orange')
  // linearGradient.addColorStop(1, 'pink')
  // ctx.fillStyle = linearGradient
  // // 绘制矩形 fillRect(x: number, y: number, w: number, h: number)
  // ctx.fillRect(100, 200, 300, 300)
  // 创建扫描动画
  let index = 0
  function render() {
    // 清空整个画布
    ctx.clearRect(0, 0, 600, 600)
    index += 0.005
    if (index > 1) {
      index = 0
    }
    // 创建绘制线性渐变 createLinearGradient(x0: number, y0: number, x1: number, y1: number)
    let linearGradient = ctx.createLinearGradient(0, 0, 600, 600)
    // 添加颜色 addColorStop(offset: number, color: string)
    linearGradient.addColorStop(0, 'red')
    linearGradient.addColorStop(index, 'orange')
    linearGradient.addColorStop(1, 'pink')
    ctx.fillStyle = linearGradient
    // 绘制矩形 fillRect(x: number, y: number, w: number, h: number)
    ctx.fillRect(100, 200, 300, 300)
    requestAnimationFrame(render)
  }
  requestAnimationFrame(render)
</script>

径向渐变

<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  /** @type {HTMLCanvasElement} */
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  // 3.绘制图形

  let index = 0
  let radiaGradinet = ctx.createConicGradient(300, 200, 0, 300, 200, 100)
  radiaGradinet.addColorStop(0, 'red')
  radiaGradinet.addColorStop(0.3, 'orange')
  radiaGradinet.addColorStop(1, 'pink')
  ctx.fillStyle = radiaGradinet
  ctx.fillRect(0, 0, 600, 600)
</script>