我的博客

# Canvas 基础

# Canvas 概述

# Canvas 标签包含三个东西

  • id：标识元素的唯一性
  • width：画布的宽度
  • height：画布的高度

<canvas id="cl" width="600" height="400"></canvas>

# Canvas的使用

# 原生js写法


<canvas id="cl" width="600" height="400"></canvas>

// 1.找到画布
const c1 = document.getElementById('c1')
//2.获取画笔、上下文对象(设置画布为2d对象)
const ctx = c1.getContext('2d')
//3.绘制图形
ctx.fillRect(100, 100, 100, 100)

# vue中得写法 （使用ref获取元素）


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

import {onMounted, ref} from 'vue'
// 1.找到画布
const canvas = ref(null)
//在生命周期中获取元素
onMounted(() => {
    //2.获取画笔、上下文对象(设置画布为2d对象)
    const ctx = canvas.value.getContext('2d')
    //3.绘制图形
    ctx.fillRect(100, 100, 100, 100)
})

# fillRect()函数填充

  • fillRect(位置x,位置y，宽度，高度)函数 填充

# 原生js写法

// 1.找到画布
const c1 = document.getElementById('c1')
//2.获取画笔、上下文对象(设置画布为2d对象)
const ctx = c1.getContext('2d')
//3.绘制图形
ctx.fillRect(100, 100, 100, 100)

# vue写法

import {onMounted, ref} from 'vue'
// 1.找到画布
const canvas = ref(null)
//在生命周期中获取元素
onMounted(() => {
    //2.获取画笔、上下文对象(设置画布为2d对象)
    const ctx = canvas.value.getContext('2d')
    //3.绘制图形
    ctx.fillRect(100, 100, 100, 100)
    //拆开写法
    ctx.rect(0, 0, 100, 100)
    ctx.fill()
})

# 浏览器兼容判断

对于canvas标签来说 当浏览器不兼容时，会将此标签做为一个普通div标签 并且显示里面得元素 此时标签不具有getContext('2d') 方法


<canvas ref="canvas" width="600" height="400">当前浏览器buzhici</canvas>

# strokeRect()方法 绘制路径

  • strokeRect(位置x,位置y，宽度，高度)函数 路径绘制
  //2.获取画笔、上下文对象(设置画布为2d对象)
const ctx = c2.value.getContext('2d')
//3.绘制路径
ctx.strokeRect(0, 0, 100, 100)
//拆开写法
ctx.rect(0, 0, 100, 100)
ctx.stroke()

# clearRect()清除绘制的图形

  • clearRect(开始清除的x坐标，开始清除的y坐标，结束清除的x坐标，结束清除的y坐标)函数 路径绘制
  • beuginPath()开始路径 可以完成路径的分段
  • closePath()结束路劲
  //2.获取画笔、上下文对象(设置画布为2d对象)
const ctx = c3.value.getContext('2d')
//3.绘制路径
ctx.strokeRect(0, 0, 100, 100)
//绘制图形
ctx.fillRect(50, 50, 100, 100)
console.log(c3.value)
let width = 0
let height = 0
let timer = setInterval(() => {
    width++
    height++
    ctx.clearRect(0, 0, width, height)
    if (height === c3.value.clientHeight && width === c3.value.clientWidth) clearInterval(timer)
}, 50)

# moveTo()移动画笔

# 绘制笑脸

const ctx = c5.value.getContext('2d')
ctx.beginPath()
//绘制脸
ctx.arc(50, 50, 50, 0, Math.PI * 2)
//移动画笔方法moveto（画笔x坐标，画笔y坐标）
ctx.moveTo(80, 70)
//绘制嘴巴
ctx.arc(50, 70, 30, 0, Math.PI)
ctx.moveTo(10, 30)
//绘制左右眼
ctx.arc(30, 30, 20, 0, Math.PI)
ctx.moveTo(50, 30)
ctx.arc(70, 30, 20, 0, Math.PI)
ctx.closePath()
ctx.stroke()

# lineTo()绘制直线

  • 使用ctx.moveTo(x坐标, y坐标)设置直线起点，ctx.lineTo(x坐标, y坐标)设置直线落点
 const ctx = c2.value.getContext('2d')
//路径三角形
ctx.beginPath()
ctx.moveTo(0, 20)
ctx.lineTo(50, 20)
ctx.lineTo(20, 50)
ctx.lineTo(0, 20)
ctx.stroke()
ctx.closePath()
//填充三角形
ctx.beginPath()
ctx.moveTo(50, 20)
ctx.lineTo(100, 20)
ctx.lineTo(70, 50)
ctx.lineTo(50, 20)
ctx.fill()
ctx.closePath()

# lineWidth属性 设置线条粗细 默认为1

 const ctx = c7.value.getContext('2d')
//设置线条粗细 默认为1
ctx.lineWidth = 20

# lineCap属性 设置线条末端的样式

设置线条末端的样式 butt平齐 round半圆 square 正方形

 const ctx = c7.value.getContext('2d')
ctx.lineCap = "round"

# lineJoin属性 设置两个线条连接处

两个线段连接处 mitter角样式 round 半圆 bevel磨平角

 const ctx = c7.value.getContext('2d')
ctx.lineJoin = 'mitter'

# miterLimit属性 角长度限制

  • 在线条连接处 ctx.lineJoin = 'mitter'模式中角长度可能会超出预期长度
  • 使用miterLimit属性控制线条连接处的角长度 超出部分的角会被磨平
 const ctx = c7.value.getContext('2d')
ctx.lineJoin = 'mitter'
//角长度限制
ctx.miterLimit = 1

# setLineDash函数设置虚线

  • 该方法传入一个数组
  • setLineDash([每一段线段的长度，两个线段间隔的距离])
 const ctx = c7.value.getContext('2d')
ctx.setLineDash([2, 25])

# lineDashOffset 设置虚线偏移

 const ctx = c7.value.getContext('2d')
ctx.lineDashOffset = 10

# arcTo()绘制圆弧

  • 绘制圆弧需要四个参数 三个点 一个圆弧半径
  • 第一个点为圆弧起点
  • 第二个点为圆弧起点和圆弧结束点直线相交的点
  • 第三个点为圆弧结束点
  • 第四个参数为圆弧半径
const ctx = c3.value.getContext('2d')
ctx.beginPath()
//绘制圆弧需要四个参数 三个点 一个圆弧半径
//绘制第一个点
ctx.moveTo(200, 0)
//使用arcto（）函数设置圆弧的第二第三个点和圆弧半径
//第二个点为第一个点直线和结束点直线的相交点
ctx.arcTo(100, 200, 50, 50, 60)
ctx.stroke()
ctx.closePath()

# quadraticCurveTo()二次贝塞尔曲线

# 绘制气泡框

  const ctx = c4.value.getContext('2d')
ctx.beginPath()
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()
ctx.closePath()

# new Path2D()路径封装

# path.ts公共部分

export const bubblepath = () => {
    const hearpath = new Path2D()
    hearpath.moveTo(200, 300)
    hearpath.quadraticCurveTo(150, 300, 150, 200)
    hearpath.quadraticCurveTo(150, 100, 300, 100)
    hearpath.quadraticCurveTo(450, 100, 450, 200)
    hearpath.quadraticCurveTo(450, 300, 250, 300)
    hearpath.quadraticCurveTo(250, 350, 150, 350)
    hearpath.quadraticCurveTo(200, 350, 200, 300)
    return hearpath
}

# 使用

//导入封装气泡框
import {bubblepath} from '../commen/Path'
//路径封装
const path = () => {
    const ctx = c6.value.getContext('2d')
    const hearpath = bubblepath()
    ctx.stroke(hearpath)
    ctx.fill(hearpath)
}
上次更新: 4/9/2023, 6:05:23 PM

颜色样式控制 →