canvas基础

news2025/1/24 3:05:39

今天我们简单的来认识学习一下canvas的基础概念和使用方法。

1. 认识canvas

1.1 什么是canvas

在网页开发中，canvas是html5中的一个元素，用于通过JavaScript绘制图形。它可以用来制作简单的图表、动画和游戏等。

1.2. 使用场景

游戏开发：可以简单实现2d网页游戏，通过绘制和更新动画帧。
数据可视化：使用canvas可以实现绘制图表和数据图形，比如折线图、柱状图。不过不建议这样做，因为有专门的可视化插件 echarts、hightCharts等。
图片编辑器：canvas可以加载图片，对图片裁剪、旋转、添加滤镜、保存图片等功能。
动画制作：canvas适合制作复杂的动画效果，例如粒子动画，过度效果，光影效果等。
绘画应用：在线绘画工具和白板应用常使用Canvas，让用户可以直接在网页上进行创作。
地图和地理应用：结合地理数据，Canvas可以用来绘制互动地图或坐标绘图，广泛用于地理信息系统（GIS）。
实时视频处理：Canvas还可以用来处理视频帧，比如添加滤镜或叠加效果，为视频应用增添功能。

示例：

加载图片
弹珠游戏

1.3 canvas元素

<canvas id="myCanvas" width="500" height="500"></canvas>

canvas有两个属性width、height, 不设置默认 width: 300px height：150px

1.4 兼容性

<canvas>
    您的浏览器不支持canvas
    <!-- or -->
    <img src="canvas.png" alt=""> 
</canvas>

1.5 判断浏览器是否支持

let canvas = document.getElementById('myCanvas');
//判断是否支持canvas
if (canvas.getContext) {
  console.log('支持')
} else {
  console.log('不支持')
}

2. 使用canvas

初始化：

let canvas = document.getElementById('myCanvas');  // 获取dom元素
var ctx = canvas.getContext('2d');   // 获取canvas 2d上下文

canvas基础方法

    initCanvas() {
      const cvs = document.getElementById('canvas')
      this.ctx = cvs.getContext('2d')

      // 设置画布的CSS显示大小
      cvs.style.width = `${displayWidth}px`
      cvs.style.height = `${displayHeight}px`

      // 设置画笔样式
      this.ctx.strokeStyle = '#fff'
      this.ctx.lineWidth = 2
      this.ctx.lineCap = 'round'
      this.ctx.lineJoin = 'round' // 添加线条连接处的样式

      this.ctx.moveTo(0, 0)   // 移动到某一位置
      this.ctx.lineTo(100, 100)  // 连线到某一位置
      this.ctx.stroke()  // 开始画
      this.ctx.closePath()   // 连接路径首尾
      this.ctx.scale(1.5, 1.2)  // 对画布缩放
      
      
      // 设置画笔样式
      this.ctx.strokeStyle = '#fff'  // 画笔颜色
      this.ctx.lineWidth = 2   // 画笔宽度
      this.ctx.lineCap = 'round' // 笔头样式  // round 半圆  butt 平角
      this.ctx.lineJoin = 'round' // 添加线条连接处的样式

	  // 添加图片
	  const img = new Image()
      img.crossOrigin = 'anonymous'  // 设置图片跨域行为
      img.src = require('@/assets/img/baidu.png')
      img.onload = () => {
        this.ctx.drawImage(img, 0, 0)  // 将图片添加到画布，三个属性，分别是  图片资源、图片左上角x轴坐标、图片左上角y轴坐标
      }
      img.onerror = (e) => {
        console.error('图片加载失败:', e)
        alert('图片加载失败，请检查图片地址或网络连接')
      }
	

	// 保存图片
	    const dataUrl = this.ctx.toDataURL('image/png')  // 将canvas转为base64
	// 下载图片
	  const link = document.createElement('a')
      link.download = '我的画布.png'
      link.href = dataUrl
      link.click()
    }
	// 清除画布
 	  this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
 	  // 四个属性分别对应 要清除区域的四个坐标