canvas学习

Canvas API 提供了一个通过 JavaScript 和 HTML 的 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas 的基本用法

元素

<canvas id="tutorial" width="150" height="150">canvas>

 function draw() {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");

          ctx.fillStyle = "rgb(200,0,0)";
          ctx.fillRect(10, 10, 55, 50);

          ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
          ctx.fillRect(30, 30, 55, 50);
        }
      }

注意：这里不要使用css设置canvas的宽高，不然会导致图像是扭曲的。

canvas绘制图形

canvas的坐标系：

canvas的坐标系不同于数学中的坐标系，是以左上角为原点的坐标系。

绘制直线线

<canvas
  id="c"
  width="300"
  height="200"
  style="border: 1px solid #ccc;"
>canvas>

<script>
  // 2、获取 canvas 对象
  const cnv = document.getElementById('c')

  // 3、获取 canvas 上下文环境对象
  const cxt = cnv.getContext('2d')

  // 4、绘制图形
  cxt.moveTo(100, 100) // 起点坐标 (x, y)
  cxt.lineTo(200, 100) // 终点坐标 (x, y)
  cxt.stroke() // 将起点和终点连接起来
script>

• 绘制直线需要的三个方法：
  1. moveTo(x1, y1)：起点坐标 (x, y)
  2. lineTo(x2, y2)：下一个点的坐标 (x, y)
  3. stroke()：将所有坐标用一条线连起来
• 直线样式
  • lineWidth：线的粗细
  • strokeStyle：线的颜色
  • lineCap：线帽：默认: butt; 圆形: round; 方形: square
    新开路径
• beginPath()
  如果不想相互污染，需要做2件事：
  • 使用 beginPath() 方法，重新开一个路径
  • 设置新线段的样式（必须项）
• closePath() 闭合路径

矩形

fillRect(x, y, width, height)
绘制一个填充的矩形

strokeRect(x, y, width, height)
绘制一个矩形的边框

clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。

或者 rect(x, y, width, height) 配合fill()和stroke() 使用

圆形弧

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

这里是引用arc() 函数中表示角的单位是弧度，不是角度。角度与弧度的 js 表达式：
弧度=(Math.PI/180)*角度

弧线

arcTo(cx, cy, x2, y2, radius) 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

贝塞尔曲线

// 绘制一个聊天框
const cnv = document.getElementById('c')
const ctx = cnv.getContext('2d');

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(250,350,200,300);

ctx.stroke()

三次贝塞尔曲线

// 绘制爱心
const cnv = document.getElementById('c')
const ctx = cnv.getContext('2d');

ctx.moveTo(300,200)
ctx.bezierCurveTo(350,150,400,200,300,250)
ctx.bezierCurveTo(200,200,250,150,300,200)

ctx.closePath()
ctx.stroke()

Path2D

保存一个路径对象，可以重复使用

const cnv = document.getElementById('c')
const ctx = cnv.getContext('2d');

var heartPath = new Path2D();
heartPath.moveTo(300,200)
heartPath.bezierCurveTo(350,150,400,200,300,250)
heartPath.bezierCurveTo(200,200,250,150,300,200)

ctx.stroke(heartPath)
ctx.fill(heartPath)

样式和色彩

颜色设置

strokeStyle = ‘red’
全局透明度： ctx.globalAlpha = 0.5

渐变

• 线性渐变
  createLinearGradient(x0: number, y0: number, x1: number, y1: number)

const cnv = document.getElementById('c')
const ctx = cnv.getContext('2d')

let index = 0
function render() {
    ctx.clearRect(0, 0, 600, 400)
    index += 0.01
    if (index >= 1) {
        index = 0
    }

    let linearGradient = ctx.createLinearGradient(100, 200, 400, 500)
    linearGradient.addColorStop(0, 'red')
    linearGradient.addColorStop(index, '#ffcccc')
    linearGradient.addColorStop(1, 'blue')
    ctx.fillStyle = linearGradient
    ctx.fillRect(100, 200, 300, 300)
    requestAnimationFrame(render)
}
requestAnimationFrame(render)

扩充：如何使用requestAnimationFrame

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
requestAnimationFrame的出现解决了这个问题。它使用浏览器的刷新率作为参考，确保动画帧的更新在每一帧之间的间隔是最佳的，从而实现更加流畅和自然的动画效果。

function animate() {
  // 执行动画逻辑

  timer=requestAnimationFrame(animate);
}

// 启动动画
let timer=requestAnimationFrame(animate);

//取消动画

• 径向渐变
  createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number)
  

// 案例实现一个看似3d的球体（有高光）
 const cnv = document.getElementById('c')
 const ctx = cnv.getContext('2d')

 let radialGradient = ctx.createRadialGradient(250, 150, 10, 300, 200, 100)
 radialGradient.addColorStop(0, '#e3e5ff')
 radialGradient.addColorStop(1, 'blue') 

 ctx.fillStyle = radialGradient
 ctx.arc(300, 200, 100, 0, (Math.PI / 180) * 360)

 ctx.fill()

• 锥形渐变
  createConicGradient(startAngle: number, x: number, y: number)
  

let conicGradient = ctx.createConicGradient(0,300,200);
conicGradient.addColorStop(0,'red');
conicGradient.addColorStop(0.5,'yellow');
conicGradient.addColorStop(1,'blue');

印章样式填充

const cnv = document.getElementById('c')
const ctx = cnv.getContext('2d')
var img = new Image();
img.src= '../image/fs.png';
img.onload = function () {
    var pattern = ctx.createPattern(img,'repeat-y');
    ctx.fillStyle = pattern;
    ctx.fillRect(0,0,600,400)
}

阴影

• shadowOffsetX = float
• shadowOffsetY = float
  shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
• shadowBlur = float
  shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
• shadowColor = color
  shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

  ctx.font = "20px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText("Sample String", 5, 30);
}

线条类型 LineStyle

绘制文本

fillText(text, x, y [, maxWidth])
strokeText(text, x, y [, maxWidth])

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

文本样式

• font = value
  当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。默认的字体是 10px sans-serif。

• textAlign = value
  文本对齐选项。可选的值包括： start,end, left, right or center. 默认值是 start。

• textBaseline = value
  基线对齐选项。可选的值包括：top, hanging,middle, alphabetic, ideographic , bottom 。默认值是 alphabetic。

• direction = value
  文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

预测量文本宽度

measureText()

使用图像

• drawImage(image, x, y)
  其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
• 缩放 drawImage(image, x, y, width, height)
  width 和 height，这两个参数用来控制 当向 canvas 画入时应该缩放的大小
• 切片 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
  其他 8 个参数,前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。

const cnv = document.getElementById('c')
const ctx = cnv.getContext('2d')
const image = new Image()
image.src = './image/flower.png'
image.width = 20
image.height = 10
image.onload = () => {
    // drawImage(image, dx, dy, dw, dh)
    ctx.drawImage(image, 30, 30,300,200)

    // drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
    // ctx.drawImage(image, 0, 0, 200, 200, 100, 100, 100, 100)
}

处理像素

• ctx.getImageData(sx, sy, sw, sh);
  返回值
  一个ImageData 对象，包含 canvas 给定的矩形图像数据。
  每4个值表示一个像素点的rgba值，所以处理像素时每次+=4。
  
  右下角变成黑白的了

const context = document.getElementById('c')
const ctx = context.getContext('2d')
const img = new Image() // 创建图片对象
img.src = './image/flower.png' // 加载本地图片

// 图片加载完成后在执行其他操作
img.onload = () => {
    // 渲染图片
    ctx.drawImage(img, 0, 0)
    // 获取图片信息

    const imageData = ctx.getImageData(0, 0, img.width, img.height)
    console.log('imageData: ', imageData)
    for (let i = 0; i < imageData.data.length; i += 4) {
        // 添加上透明度
        // imageData.data[i + 3] = imageData.data[i + 3] * 0.5

        // 变成黑白的图片
        let avg = (imageData.data[i]+imageData.data[i+1]+imageData.data[i+2])/3
        imageData.data[i] = avg;
        imageData.data[i+1] = avg;
        imageData.data[i+2] = avg;
    }
    ctx.putImageData(imageData, 0, 0,200,200,200,200)
}

变形 Transformations

状态的保存和恢复

• save()
  保存画布 (canvas) 的所有状态

• restore()
  save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。
  

const cnv = document.getElementById('c')
const ctx = cnv.getContext('2d')

ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 100, 100)
ctx.save()
ctx.fillStyle = 'blue'
ctx.fillRect(100, 100, 100, 100)
ctx.save()
ctx.fillStyle = 'yellow'
ctx.fillRect(200, 200, 100, 100)
ctx.save()
ctx.fillStyle = 'green'
ctx.fillRect(300, 300, 100, 100)

ctx.restore()
ctx.fillRect(400, 400, 100, 100)

最后保存了 黄色，restore之后再绘制，就能画出黄色的矩形。

变形

• 平移 translate(x, y)

• 旋转 rotate(angle)
  旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate方法。

• 缩放 scale(x, y)

• 变形 transform(a, b, c, d, e, f)

  • 这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵，如下面的矩阵所示：
    

  • 
    • a (m11)
      水平方向的缩放
    • b(m12)
      竖直方向的倾斜偏移
    • c(m21)
      水平方向的倾斜偏移
    • d(m22)
      竖直方向的缩放
    • e(dx)
      水平方向的移动
    • f(dy)
      竖直方向的移动

• setTransform()

transform VS 而setTransform
transform() 每次执行都会参考上一次变换后的结果,而setTransform() 每次调用都会基于最原始是状态进行变换。

组合 Compositing

globalCompositeOperation = type
这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识 12 种遮盖方式的字符串。

裁切

clip()
将当前正在构建的路径转换为当前的裁剪路径。

案例

绘图板
参考代码 ：https://gitee.com/zpp2000131/canvas-study/blob/master/canvas%E8%A7%86%E9%A2%91%E8%AF%BE/1-14%20%E7%94%BB%E5%9B%BE%E6%9D%BF.html