🟡JavaScript动画

本文最后更新于：2024年4月25日上午

动画间隔

requestAnimationFrame

接收一个函数地址,多次触发时会有节流效果,该函数同setInterval可返回一个id

const example = document.querySelector('.example')

requestAnimationFrame(move)

function move() {
  const margin = parseInt('0' + example.style.marginLeft)
  if(margin < 80){
    example.style.marginLeft = `${margin+1}%`
    requestAnimationFrame(move)
  }
}

查看效果

clearAnimationFrame

该方法同clearInterval方法,可停止requestAnimationFrame执行

1 2	`const animation = requestAnimationFrame(fill) clearAnimationFrame(animation) // 停止动画`

canvas

canvas标签

canvas标签使用JavaScript来绘制动画与图像

首先要获取标签对象

1	`const board = document.getElementById('board')`

getContext()

该方法用于获取canvas上下文

1	`const ctx = board.getContext('2d')`

设置绘制属性

🥝fillStyle

设置填充内容属性

1 2	`ctx.fillStyle = '#787;' ctx.fillStyle = 'rgba(119, 136, 119, 0.5)'`

🥝strokeStyle

设置边框属性

🥝lineWidth

设置画笔粗细

绘制图像

🍉矩形

📌fillRect

fillRect(posX, posY, width, height)方法绘制实心矩阵

可用fillStyle设置填充样式

1	`ctx.fillRect(10, 10, 10, 10)`

绘制

📌strokeRect

strokeRect(posX, posY, width, height)方法绘制空心矩阵

可用strokeStyle设置边框样式

1	`ctx.strokeRect(10, 10, 10, 10)`

绘制

📌clearRect

clearRect(posX, posY, width, height)方法擦除矩形内容

擦除

🍉曲线

📌beginPath()

使用beginPath()开始绘制新路径

📌closePath()

连接路径终点与起点

📌stroke()

用线条描绘路径,可用strokeStyle设置画笔样式

📌fill()

填充闭合路径,可用fillStyle设置填充样式

若曲线未闭合则隐式调用closePath()

📌moveTo(x, y)

将画笔光标移至(x, y)

📌lineTo(x, y)

链接上一坐标至(x, y)

📌arc(x, y, radius, startAngle, endAngle, direction)

绘制圆弧路径

x, y--------------------------------圆心坐标
radius-----------------------------半径
startAngle, endAngle---------圆弧始末角度(弧度制)
direction------------------------是否顺时针绘制

arcCtx.beginPath()
arcCtx.arc(120, 60, 50, .785, -.785, false)
arcCtx.stroke()

arcCtx.beginPath()
arcCtx.arc(260, 60, 50, .785, -.785, false)
arcCtx.fill()

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

用半径radius的圆弧连接上一坐标和(x2, y2),圆弧在上一坐标与(x2, y2)的切线交于(x1, y1)

ctx.beginPath()
ctx.moveTo(70, 100)
ctx.arcTo(220, 10, 420, 300, 80)
ctx.stroke()

红色(x1, y1)
黄色(x2, y2)
白色上一坐标

📌rect(x, y, width, height)

绘制矩形路径

ctx.beginPath()
ctx.rect(10, 10, 90, 90)
ctx.stroke()

ctx.beginPath()
ctx.rect(120, 10, 90, 90)
ctx.fill()

📌quadraticCurveTo(cx, cy, x, y)

ctx.beginPath()
ctx.moveTo(70, 100)
ctx.quadraticCurveTo(90, 10, 220, 90)
ctx.stroke()

红色(cx, cy)
黄色(x, y)
白色上一坐标

📌bezierCurveTo(cx1, cy1, cx2, cy2, x, y)

ctx.beginPath()
ctx.moveTo(70, 100)
ctx.bezierCurveTo(90, 10, 240, 30,220, 90)
ctx.stroke()

红色(cx1, cy1)
蓝色(cx2, cy2)
黄色(x, y)
白色上一坐标

🍉字符

📌font

设置字体样式

📌textAlign

设置文本对齐方式

📌textBaseLine

文本基线

📌fillText('context', x, y)

绘制文本

🍉图像变换

📌rotate(n deg)

图像旋转n deg

📌scale()

📌translate(x, y)

📌transform()

📌setTransform()

🍉图像

📌drawImage(imageObj, x, y)

图片打码Demo

🥕HTML代码

<style>
  .pic {
    border: 5px solid #fa8b83;
    max-width: 100%;
  }
</style>
<canvas class="pic">该浏览器不支持canvas</canvas>

🥕JavaScript代码

// url=图片地址     n=马赛克矩形边长
const Mosaic = (url = 'https://s3.bmp.ovh/imgs/2022/02/57d13c60b0c24d94.jpg', n = 20) => {
  const pic = document.querySelector('.pic')
  const ctx = pic.getContext('2d')

  const image = new Image();                              // 导入图片
  [image.src, image.crossOrigin] = [url, '']              // crossOrigin = ''用于解决跨域
  ctx.fillStyle = ctx.createPattern(image, 'no-repeat')
  image.onload = () => {
    ;[pic.width, pic.height] = [image.width, image.height]
    ctx.drawImage(image, 0, 0)
    drawMosaic(image.width, image.height)                // 调用打码函数
  }
  
  function drawMosaic(x, y) {                            // 打码函数
    let k = 0
    for(let i = 0;i < x;i += n){
      for(let j = 0;j < y;j += n){
        setTimeout(() => {
          const colorData = ctx.getImageData(i, j, 1, 1).data
          ctx.fillStyle = `rgba(${colorData[0]}, ${colorData[1]}, ${colorData[2]}, ${colorData[3]})`
          ctx.fillRect(i, j, n, n)
        }, (k++ * 100 * n) / x)
      }
    }
  }
}