牛刀小试

1. 创建Canvas元素，并使用宽度和高度属性设置Canvas的大小
2. 获取Context(画笔)工具
3. 使用CanvasAPI进行绘制

<script setup>
import { ref, onMounted } from 'vue'
// 1. 创建`Canvas`元素
const canvas = ref()
onMounted(() => {
  // 2. 获取`Context`(画笔)工具
  const context = canvas.value.getContext('2d')
  // 3. 使用`CanvasAPI`进行绘制
  context.fillRect(100, 100, 200, 200)
})
</script>

<template>
    
  <canvas ref="canvas" width="600" height="400"></canvas>
</template>

第一部分

画直线

1. 使用moveTo方法把画笔移动到直线起点
2. 使用lineTo方法把画笔移动到终点
3. 使用stroke方法让画笔绘制线条

const canvas = ref()
onMounted(() => {
  const context = canvas.value.getContext('2d')
  context.moveTo(100,100)
  context.lineTo(300,100)
  context.stroke()
})

const canvas = ref()
onMounted(() => {
  const context = canvas.value.getContext('2d')
  context.moveTo(100,100)
  context.lineTo(200,200)
  context.lineTo(300,100)
  context.lineTo(400,200)
  context.stroke()
})

线条样式

context.lineWidth = 10 线条粗细

context.strokeStyle='#0a0' 线条颜色

渐变

  // 创建渐变
  const gradient = context.createLinearGradient(100, 100, 200, 200)
  // 从什么颜色开始渐变
  gradient.addColorStop(0, "red");
  gradient.addColorStop(0.5, "black");
  gradient.addColorStop(1, "blue");

  context.moveTo(100, 100)
  context.lineTo(200, 200)
  context.lineWidth = 10
  context.strokeStyle  = gradient;
  context.stroke()

径向渐变

  // 创建渐变
  const gradient = context.createRadialGradient(100, 100, 0, 100, 100,100);
  // 从什么颜色开始渐变
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "green");
  
  context.fillStyle = gradient
  context.fillRect(0, 0, 200, 200)

弧线

   context.arc(100,100,50,0,1)
   context.stroke();

椭圆