canvas的基础知识

这篇文章讲解一些 canvas 比较基础的知识，如果需要深入了解 canvas 的可以看书籍或者相关的网站：

canvas简介

cavans 用于绘制图表、制作图片构图或者制作简单的动画，canvas 的默认大小为 300 像素 × 150 像素，如果要处理canvas图片模糊的问题，可以看看这篇文章：《canvas.width和canvas.style.width区别以及应用》

canvas基本使用

• 获取canvas的上下文，用来获得渲染上下文和它的绘画功能

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");

• canvas坐标系统

  canvas的坐标起点为左上角,坐标为(0,0),向右为x轴的正方向,向下为y轴的正方向。这与我们传统的网页坐标系不同,网页坐标系的原点在左下角。

• canvas绘图API

  • 绘制矩形（绘制基本矩形有3种不同的方式：填充、描边和清除）

  # 填充矩形，填充的样式使用 fillStyle
  fillRect(x, y, width, height) 
  
  # 描边矩形，描边的样式使用 strokeStyle
  strokeRect(x, y, width, height)
  
  # 清除矩形
  clearRect(x, y, width, height)
  

  • 绘制路径

  # 开始一条新路径
  beginPath()
  
  # 设置绘制的起点，移动画笔而不画线
  moveTo(x, y)
  
  # 画直线到指定点
  lineTo(x, y)
  
  # 绘制圆弧，sAngle 和 eAngle 必须是弧度值，1角度 = Math.PI/180
  # anticlockwise 为 true，表示绘制反向的圆弧
  arc(x, y, r, sAngle, eAngle, anticlockwise)
  
  # 绘制矩形路径
  rect(x, y, w, h)
  
  # 将路径首尾相连,闭合路径
  closePath()
  
  # 根据当前路径画线，使用 stroke 或者 fill 才可以完成画路径
  stroke()
  
  # 根据当前路径填充，使用 stroke 或者 fill 才可以完成画路径
  fill()
  

  • 设置样式和颜色

  # 设置填充样式和颜色
  fillStyle
  
  # 设置描边样式和颜色
  strokeStyle
  
  # 设置线宽
  lineWidth
  
  # 设置线端样式:butt、round、square
  lineCap
  
  # 设置拐角样式
  lineJoin
  

  • 绘制文本

  # 设置字体
  font
  
  # 设置文本的对齐方式
  textAlign
  
  # 在指定的位置填充文字
  fillText(text, x, y)
  
  # 在指定的位置描边文字
  strokeText(text, x, y)
  

  • 绘制图像

  # 绘制整张图像到指定的位置
  drawImage(image, x, y)
  
  # 绘制图像到指定的位置和指定大小
  drawImage(image, x, y, width, height)
  
  # 从图像的指定位置和大小切一张图绘制到指定位置和大小的canvas里，在游戏中经常用来处理 sprite
  drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
  
  # 获取 canvas 图像区域的数据
  getImageData(x, y, width, height)
  
  # 将图像数据放回 canvas
  putImageData(imagedata, x ,y)
  

• 动画基础

  • 清空重绘

  # 清除矩形
  clearRect(x, y, width, height)
  

  • requestAnimationFrame

  # 能够以每秒60帧的方式运行动画
  requestAnimationFrame(func)
  

变换操作

• 移动translate

# 平移坐标系原点到指定的x、y位置,坐标系原点变为(x, y),后续的绘制会以新原点为基准点
translate(x, y)

• 旋转rotate

# 在原有坐标系下,围绕原点进行旋转变换,参数为旋转的弧度值
rotate(angle)

• 缩放scale

# 对坐标系进行缩放变换,x、y分别是横轴和纵轴的缩放比例,1为原始大小
scale(x, y)

图像处理

• 图像合成

  canvas的图像合成指的是将两张以上的图像混合在一起,生成一张新的图像的技术。主要通过设置全局合成属性globalCompositeOperation来控制图像间的混合效果，globalCompositeOperation 有几个常用的属性：

  • source-over # 新图在上面，新图在原有图形上绘制，这是默认设置
  • source-atop # 新图在上面，新图形只在与原有图形重叠的地方绘制，原有图形没有重叠的部分保留
  • source-in # 新图在上面，只绘制新图形和原有图形重叠的部分，保留新图形，其他的都不绘制
  • source-out # 新图在上面，只绘制新图形，并且新图形和原有图形重叠的部分不绘制
  • destination-over # 原有图形在上面，新的图形在原有图形的下面
  • destination-atop # 原有图形在上面，新图形只在与原有图形重叠的地方绘制，新图形没有重叠的部分保留
  • destination-in # 原有图形在上面，只绘制新图形和原有图形重叠的部分，保留原有图形，其他的都不绘制
  • destination-out # 原有图形在上面，现有内容保持在新图形不重叠的地方
  • lighter # 两个重叠图形的颜色是通过颜色值相加来确定的
  • copy # 只显示新图形
  • xor # 重叠区域透明

• 裁剪

  canvas的裁剪功能允许我们只显示canvas的某个区域的内容，使用路径进行裁剪

简单的示例

// 初始化
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// 填充的矩形
ctx.fillStyle = 'rgb(255, 255, 0)'
ctx.fillRect(30, 30, 100, 100)

// 画线
ctx.beginPath()
ctx.moveTo(100, 100)
ctx.lineTo(150, 200)
ctx.lineTo(300, 300)
ctx.stroke()
ctx.closePath()

// 画矩形
ctx.lineWidth = 10
ctx.strokeStyle = 'green'
ctx.strokeRect(50, 80, 100, 200)

// 画空心圆
ctx.lineWidth = 2
ctx.strokeStyle = 'pink'
ctx.beginPath()
ctx.arc(200, 150, 30, 0, (Math.PI / 180) * 130, true)
ctx.stroke()
ctx.closePath()

// 画实心圆
ctx.lineWidth = 2
ctx.fillStyle = 'pink'
ctx.beginPath()
ctx.arc(200, 250, 30, 0, (Math.PI / 180) * 130, true)
ctx.fill()
ctx.closePath()

// ctx.clearRect(40, 40, 50, 50)

// clip，要使用 save 和 restore 保存当前状态和恢复当前的状态，不然 clip 会影响到后面的操作
ctx.save()
ctx.beginPath()
ctx.arc(300, 300, 40, 0, (270 * Math.PI) / 180, false)
ctx.fillStyle = 'lightpink'
ctx.clip()
ctx.fillRect(200, 200, 300, 300)
ctx.closePath()
ctx.restore()

// 文字
ctx.fillStyle = 'blue'
ctx.font = '20px Sans-Serif'
ctx.textBaseline = 'top'
ctx.fillText('Hello World', 280, 280)

参考链接

• https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial