canvas的简单使用

canvas这是一个非常强大的画图工具，既能划线，还能画图，最牛逼的是还能用来讨女朋友开心，啧啧啧。

canvas基础使用

计算机主要掌握方式就是练，所以我们直接上代码。

创建一个画布

    <canvas id='canvas1' ref='canvas1'
    style="width: 100px; height: 100px; border: 1px solid pink;"></canvas>

canvas画线(moveTo-lineTo)

  mounted() {
    let canvas1 = this.$refs.canvas1 //找到canvas元素
    let context1 = canvas1.getContext('2d') //创建context对象
    context1.fillStyle = '#FF0000' //画笔颜色

    context1.moveTo(0, 0) //线条开始的坐标
    context1.lineTo(100, 200) //线条结束的坐标
    context1.stroke() //画线条必须有
  },

canvas画矩形(fillRect)

  mounted() {
    let canvas1 = this.$refs.canvas1 //找到canvas元素
    let context1 = canvas1.getContext('2d') //创建context对象
    context1.fillStyle = '#FF0000' //画笔颜色
     //fillRect(x, y, width, height)，x和y确定在画布上开始位置，后面表示绘制100*75的矩形
    context1.fillRect(0, 0, 100, 75)
  },

canvas画圆(arc)

  mounted() {
    let canvas1 = this.$refs.canvas1 //找到canvas元素
    let context1 = canvas1.getContext('2d') //创建context对象
    context1.fillStyle = '#FF0000' //画笔颜色

    context1.beginPath()
    // arc(x, y, r, start, stop) x,y是圆心坐标，r半径，start开始度数，stop结束的地方
    context1.arc(95, 50, 40, 0, 2 * Math.PI); //整个圆
    context1.stroke()

  },
}

canvas写字(fillText/strokeText)

  mounted() {
    let canvas1 = this.$refs.canvas1 //找到canvas元素
    let context1 = canvas1.getContext('2d') //创建context对象
    context1.fillStyle = '#FF0000' //画笔颜色
    // 写字
    context1.font = '50px Arial' //字体属性
    context1.fillText('Hello World', 50, 50) //实体绘制的内容和位置，strokeText为空心
  },

canvas渐变

线性渐变（createLinearGradient(x, y, x1, y1)）

  mounted() {
    let canvas1 = this.$refs.canvas1 //找到canvas元素
    let context1 = canvas1.getContext('2d') //创建context对象
    context1.fillStyle = '#FF0000' //画笔颜色

    // 渐变
    // 创建渐变
    let grd=context1.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"pink");
    grd.addColorStop(1,"white");
    
    // 填充渐变
    context1.fillStyle=grd;
    context1.fillRect(10,10,150,80);
  }

圆型渐变（createRadialGradient(x, y, r, x1, y1, r1)）

  mounted() {
    let canvas1 = this.$refs.canvas1 //找到canvas元素
    let context1 = canvas1.getContext('2d') //创建context对象
    context1.fillStyle = '#FF0000' //画笔颜色

    // 渐变
    // 创建渐变
    let grd=context1.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"pink");
    grd.addColorStop(1,"white");
    
    // 填充渐变
    context1.fillStyle=grd;
    context1.fillRect(10,10,150,80);
  }

canvas画图（drawImage(image, x, y))

  mounted() {
    let canvas1 = this.$refs.canvas1 //找到canvas元素
    let context1 = canvas1.getContext('2d') //创建context对象
    context1.fillStyle = '#FF0000' //画笔颜色
    //图像
    let image = new Image()
    image.src = 'https://z3.ax1x.com/2021/10/07/5pUz4g.jpg'
    image.onload = () => {
      context1.drawImage(image, 0,0) //图片地址和开始位置
    }
  }

操作实例

既然我们已经学会了咋样去使用canvas，那么我们来用canvas来画一个好玩的刮刮乐吧

<template>
  <div class="scratchers">
    <canvas id='cl' 
            @mousedown.stop='down' @mousemove='move' @mouseup='up' 
            ref='photo1' width="600" height="450"></canvas>
    <canvas id='c2' ref='photo2' width="600" height="450"></canvas>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      isDown: false
    }
  },
  mounted() {
    //创建画笔工具
    let brush1 = this.$refs.photo1.getContext('2d')
    let brush2 = this.$refs.photo2.getContext('2d')

    //将图片画到第二层
    let imgs = new Image()
    imgs.src =  'https://z3.ax1x.com/2021/10/07/5pUz4g.jpg'
    imgs.onload = function() {
      brush2.drawImage(this, 0, 0)
    }

    // 在第一层画上遮罩层
    brush1.fillStyle = '#77FFcc'
    brush1.fillRect(0, 0, 600, 450)

    // 文字提示
    brush1.font = 'normal 80px 仿宋'
    brush1.strokeStyle = 'skyblue'
    brush1.strokeText('请刮开', 200, 250)
    
  },
  methods: {
    down() {
      this.isDown = true
    },
    move() {
      if(!this.isDown) return
      let brush1 = this.$refs.photo1.getContext('2d')
      brush1.clearRect(event.offsetX, event.offsetY, 35 , 35)
    },
    up() {
      this.isDown = false
    }
  },
}
</script>

<style scoped>
  .scratchers {
    position: relative;
  }
  #cl {
      position: absolute;
    }
</style>