所在位置:

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)

参考链接

【上一篇】安装和使用webpack

【下一篇】没有下一篇文章了

相关文章