🟡JavaScript动画

本文最后更新于:2022年4月8日 晚上

动画间隔

requestAnimationFrame

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

1
2
3
4
5
6
7
8
9
10
11
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)

绘制

该浏览器不支持canvas

📌strokeRect

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

可用strokeStyle设置边框样式

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

绘制

该浏览器不支持canvas

📌clearRect

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

擦除

该浏览器不支持canvas

🍉曲线

📌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------------------------是否顺时针绘制
1
2
3
4
5
6
7
arcCtx.beginPath()
arcCtx.arc(120, 60, 50, .785, -.785, false)
arcCtx.stroke()

arcCtx.beginPath()
arcCtx.arc(260, 60, 50, .785, -.785, false)
arcCtx.fill()
该浏览器不支持canvas

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

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

1
2
3
4
ctx.beginPath()
ctx.moveTo(70, 100)
ctx.arcTo(220, 10, 420, 300, 80)
ctx.stroke()
  • 红色(x1, y1)
  • 黄色(x2, y2)
  • 白色上一坐标
该浏览器不支持canvas

📌rect(x, y, width, height)

绘制矩形路径

1
2
3
4
5
6
7
ctx.beginPath()
ctx.rect(10, 10, 90, 90)
ctx.stroke()

ctx.beginPath()
ctx.rect(120, 10, 90, 90)
ctx.fill()
该浏览器不支持canvas

📌quadraticCurveTo(cx, cy, x, y)

1
2
3
4
ctx.beginPath()
ctx.moveTo(70, 100)
ctx.quadraticCurveTo(90, 10, 220, 90)
ctx.stroke()
  • 红色(cx, cy)
  • 黄色(x, y)
  • 白色上一坐标
该浏览器不支持canvas

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

1
2
3
4
ctx.beginPath()
ctx.moveTo(70, 100)
ctx.bezierCurveTo(90, 10, 240, 30,220, 90)
ctx.stroke()
  • 红色(cx1, cy1)
  • 蓝色(cx2, cy2)
  • 黄色(x, y)
  • 白色上一坐标
该浏览器不支持canvas

🍉字符

📌font

设置字体样式

📌textAlign

设置文本对齐方式

📌textBaseLine

文本基线

📌fillText('context', x, y)

绘制文本

🍉图像变换

📌rotate(n deg)

图像旋转n deg

📌scale()

📌translate(x, y)

📌transform()

📌setTransform()

🍉图像

📌drawImage(imageObj, x, y)

图片打码Demo

🥕HTML代码

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

🥕JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 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)
}
}
}
}

🥕效果展示

查看效果

该浏览器不支持canvas

参考文档:

《JavaScript高级程序设计 (第四版)》

《HTML中canvas标签的弧线arcTo使用方法 (季大师)》


🟡JavaScript动画
https://qingshaner.com/JavaScript动画/
作者
清山
发布于
2022年2月16日
许可协议