canvas标签实现图标打点功能

（一）前言

​ canvas标签是日常工作中很常用的标签，其图标打点是日常工作中很常见的一个功能，所以尝试了一个demo，以对canvas标签进行了解学习的同时，在工作中遇到类似的需求也可以进行复用，提高工作效率。

（二）知识点学习

canvas标签，通过JavaScript结合使用，可以在网页上绘制图形；Canvas是一个矩形区域，使用Javascript可以控制其每一个像素。本文将对canvas标签进行简要的学习

1、创建一个canvas元素并画一个矩形后擦除：

代码：

2、画一个笑脸

代码：

3、画一个三角形

代码：

4、画圆弧：

arcTo(x1,y1,x2,y2,radius)

圆弧画法：蓝色的点是画笔的起始点，红色的点是控制点x1/x2的坐标

圆弧为两根连线的切线；

（二）图标打点实现

效果：

代码：

vue中

template>
  <!-- 
    1、设置id
    2、设置画布的宽高
    3、若canvas设置style，则style的样式优先级最高，且等比例压缩画布
    4、aspect ratio: auto width / height
   -->
  <canvas id="canvasPractice" width="385" height="385"></canvas>
  <img
    id="testImg"
    src="https://img.88icon.com/upload/jpg/20210523/4d7ca3add7c78f15ccda8b09a8feaf7c_12871_512_512.jpg!88bg"
    alt=""
    style="display: none;"
  >
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { drawImg } from '@/utils/drawImg.ts'

onMounted(() => {
  const canvasEle:HTMLElement | null = document.getElementById('canvasPractice')
  const imageEle:HTMLElement | null = document.getElementById('testImg')
  drawImg(canvasEle, imageEle)
})
</script>

<style scoped lang="scss">
#canvasPractice {
  transform-origin: center;
}
</style>

drawImg.ts

import { onUnmounted } from 'vue'

const drawImg = (canvasEle: any, imageEle: any) => {
  // 等待图片加载完成之后再绘图
  imageEle.onload = () => {
    const ctx = (<HTMLCanvasElement>canvasEle).getContext('2d')
    canvasEle.width = imageEle.width
    canvasEle.height = imageEle.height
    if (ctx) {
      ctx.drawImage((<HTMLImageElement>imageEle), 0, 0)
    }
  }
  const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = canvasEle
  const maxX = window.innerWidth - offsetWidth
  const maxY = window.innerHeight - offsetHeight
  const clickCB = (e: any) => {
    console.log(e, 'e')
    // 在边界则移动点为左上角  不在边界则移动点为中心点
    const normalMoveX = e.clientX - offsetWidth / 2
    const normalMoveY = e.clientY - offsetHeight / 2
    const transLeft = normalMoveX > 0 ? ( e.clientX > maxX ? maxX : normalMoveX ) : 0
    const transTop = normalMoveY > 0 ? ( e.clientY > maxY ? maxY : normalMoveY ) : 0
    canvasEle.style.transform = `translate(${transLeft - offsetLeft}px, ${transTop}px)`
  }
  window.addEventListener('click', clickCB)
  
  onUnmounted(() => {
    window.removeEventListener('click', clickCB)
  })
}

export {
  drawImg
}