sialvsic的Tech空间

# Canvas 基础

# Canvas

<canvas>元素最早是由苹果公司推出的。与浏览器环境中的其他组件类似，<canvas>由几组API构成，但并非所有的这些的API。除了具备基本绘图能力的2D上下文，<canvas>还建议了一个名为WebGL的3D上下文，但是目前对于WebGL的支持还不太好

# 基本用法

  • 首先需要设置width和height属性，指定绘图的区域大小
  • 取得绘图区域的引用getContext
  • 绘制图像
const canvas = document.querySelector('canvas');
  if(canvas.getContext) {
    const ctx = canvas.getContext('2d')
    //ctx
  }

# 2D上下文

# 填充和描边

2D上下文的两种基本绘图操作是填充和描边。

  • 填充，就是用指定的样式(颜色、渐变或图像)填充图形
  • 描边，就是只在图形的边缘画线

填充和渐变两个操作取决于两个属性：fillStyle和strokeStyle，这两个属性的值都可以是字符串，渐变对象,模式对象，默认值为#000000

const ctx = canvas.getContext('2d');
ctx.strokeStyle = "red";
ctx.fillStyle = "#0000FF";

# 绘制图形

# 绘制矩形

以下三个方法均接受相同的参数，矩形的X坐标，Y坐标，矩形的宽度，矩形的高度，单位都是像素

  • fillRect() 绘制填充的矩形
  • strokeRect() 绘制描边的矩形
  • clearRect() 清除画布上的矩形区域
const ctx = canvas.getContext('2d');

//fillRect
ctx.fillStyle = "rgba(0,0,255,0.5";
ctx.fillRect(20, 20, 50, 50);

//strokeRect
ctx.strokeStyle = "#ff781e";
ctx.strokeRect(100, 100, 50, 50);

//clearRect 
ctx.clearRect(40, 40, 10, 10);

# 绘制路径

2D绘制上下文支持很多在画布上绘制路径的方法。通过路径可以创造出复杂的形状和线条。要绘制路径，必须要调用beginPath()方法，表示要开始绘制新路径，然后在通过调用下列方法来实际的绘制路径。绘制路径完成后，可以：

  • 如果想绘制一条连接到路径起点的线条，可以调用closePath()
  • 如果路径已经完成，你想用fillStyle填充它，可以调用fill()方法
  • 如果路径已经完成，可以调用stroke()方法对路径进行描边，使用strokeStyle
  • 如果路径已经完成，可以调用clip()，这个可以在路径上创建一个剪切区域

arc arc(x, y, radius, startAngle, endAngle, counterclockwise)

以(x,y)为圆心绘制一条弧线，弧线的半径为radius，起始和结束角度(用弧度表示)分别为startAngle和endAngle

- x	圆的中心的 x 坐标。
- y	圆的中心的 y 坐标。
- radius	圆的半径。
- sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
- eAngle	结束角，以弧度计。
- counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

eg:

arcTo arcTo(x1, y1, x2, y2, radius)

从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定的半径穿过(x1,y1)

eg:

bezierCurveTo bezierCurveTo(c1x, c1y, c2x, c2y, x, y)

从上一点开始绘制一条曲线，到(x, y)为止，并且以(c1x, c1y)和(c2x, c2y)为控制点

eg:

lineTo lineTo(x, y)

从上一点开始绘制一条直线，到(x, y)为止.

eg:

moveTo moveTo(x, y)

将绘图游标移动到(x, y)，不画线

eg:

quadraticCurveTo quadraticCurveTo(cx, cy, x, y)

从上一点开始绘制一条二次曲线，到(x, y)为止，并且以(cx, cy)作为控制点

eg:

rect rect(x, y, width, height)

从点(x, y)开始绘制一个矩形，宽度和高度由width和height指定。这个方法绘制的是矩形路径，而不是strokeRect()和fillRect所绘制的独立的形状

eg:

isPointInPath isPointInPath()方法接受x, y作为参数，用于在路径被关闭之前确定画布上的某一点是否位于路径上

if(cotext.isPointInPath(100,200)){
  console.log("x=100, y=200 is in the path")
}

# 绘制文本

  • fillText()
  • strokeText()

都接受四个参数，要绘制的文本字符串，x坐标，y坐标和可选的最大像素值 eg:

context.font = 'bold 14px Arial';
context.textAlign = 'center';
context.fillText('12', 100, 20)

# 变换

通过上下文的变换，可以把处理后的图像绘制到画布上。变换有可能很简单，也可能很复杂，都要视情况而定。

  • rotate(angle): 围绕原点旋转图像angle弧度
  • scale(scaleX, scaleY): 缩放图像，在x方向乘以scaleX，在y方向乘以scaleY，默认值都是1.0
  • translate(x, y): 将坐标原点移动到(x,y) 执行这个变换之后，坐标(0,0)会变成之前由(x,y)表示的点
  • transform(m1_1, m1_2, m2_1, m2_2, dx, dy) 直接修改变换矩阵，方式是乘以一个其他矩阵
  • setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy) 将变换矩阵重置为默认状态，然后在调用transform()

# 绘制图像

如果想让一幅图像放在画布上，可以使用drawImage()方法

# 阴影

2D上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。

  • shadowColor: 用CSS颜色格式表示的阴影颜色，默认为黑色
  • shadowOffsetX: 形状或路径x轴方向的阴影偏移量，默认为0
  • shadowOffsetY: 形状或路径y轴方向的阴影偏移量，默认为0
  • shadowBlur: 模糊的像素数，默认为0，即不模糊

# 渐变

# 模式

模式其实就是重复的图像

# 使用图像数据

2D上下文的一个明显的长处就是，可以通过getImageData()取得原始图像数据。可以通过操作原始像素值实现一些图像的特殊处理

# 合成

  • globalAlpha 设置全局透明度
  • globalCompositionOperation 设置后绘制的图形怎样与先绘制的图形结合

← Canvas 101 →

陕ICP备20004732号-3