一、场景描述
利用js中的canvas画图来画图，爱心、动画。
二、问题拆解
第一个是：canvas画图相关知识。
第二个是：动画相关内容。
三、知识背景
3.1 canvas画图相关内容
canvas画图的基本步骤
- 获取页面上的canvas标签对象
- 获取绘图上下文 canvas.getContext(“2d")
- 绘图
- 绘制已定义的路径 strock()
3.2 requestAnimationFrame(callback)方法 替代setTimeout和setInterval来设置动画
requestAnimationFrame这个方法的作用是 回掉函数的调用频率与显示器的刷新率一样。
用法如下所示
const zero = performance.now(); //获取当前时间戳
function animate() {
//利用现在时间戳减去程序开始时的时间戳，进行动画制作（求余再除 1 秒周期的动画）
const value = ((performance.now() - zero) % 1000) / 1000;
//清除当前区域的以画图形
ctx.clearRect(0,0,width,height);
//重新画图
draw(100+10*value);
console.log(value);
//进行回调
animationFrame = requestAnimationFrame(animate);
}
四、场景实现
画爱心
爱心的极坐标公式
x(t) = 16* sin^{3}(t)
y(t) = 13cos(t) - 5cos(2t) - 2cos(3t) - cos(4t)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
//根据公式获取爱心图形路径上的点
function getPointsXY(){
var points = [];
var x=0,y=0;
for(var i = 0;i<Math.PI*2;i=i+0.01){
x = 16 * Math.pow(Math.sin(i),3)*20;
y = -(13 * Math.cos(i) - 5 * Math.cos(2*i) - 2 * Math.cos(3*i) - Math.cos(4*i))*20;
points.push({x: canvas.width / 2 + x,y: canvas.height / 2 + y})
}
return points;
}
function init() {
const width = window.innerWidth;
const height = window.innerHeight;
canvas.width = width;
canvas.height = height;
}
//获取页面上的canvas标签
const canvas = document.getElementById("canvas");
init();
//获取绘图上下文
const ctx = canvas.getContext("2d");
//设置画笔颜色
ctx.strokeStyle = 'pink';
ctx.lineWidth = 5;
//开始路径
ctx.beginPath();
//获取路径上的各个节点
var points = getPointsXY();
//依次连接各个点
ctx.moveTo(points[0].x,points[0].y);
for(let item of points){
ctx.lineTo(item.x,item.y);
ctx.moveTo(item.x,item.y);
}
ctx.lineTo(points[0].x,points[0].y);
ctx.moveTo(0,0);
// for(let item of points){
// ctx.lineTo(item.x,item.y);
// ctx.moveTo(item.x,item.y);
// }
ctx.lineTo(50,50);
//闭合路径
//ctx.closePath();
//描述
ctx.stroke();
//ctx.fill();
</script>
</html>
图形动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
function draw(r)
{
//圆心位置 (x, y), 半径, 起始角度, 结束角度, 方向 (true为顺时针, false为逆时针)
ctx.beginPath();
ctx.arc(width/2,height/2,r,0,Math.PI*2,false);
let grad = ctx.createRadialGradient(width/2,height/2, 50, width/2,height/2, 200)
grad.addColorStop(0, "pink"); // 设置渐变颜色
grad.addColorStop(0.5, "yellow");
grad.addColorStop(1, "lightblue");
ctx.fillStyle = grad; // 设置fillStyle为当前的渐变对象
ctx.fill();
//闭合路径
ctx.closePath();
//描述
ctx.stroke();
ctx.beginPath();
ctx.arc(width/2,height/2,5,0,Math.PI*2,false)
//设置填充色
ctx.fillStyle = "lightblue";
//填充图
ctx.fill();
}
function animate() {
const value = ((performance.now() - zero) % 1000) / 1000;
ctx.clearRect(0,0,width,height);
draw(100+10*value);
console.log(value);
animationFrame = requestAnimationFrame(animate);
}
const canvas = document.getElementById("canvas");
//设置canvas画板大小
const width = window.innerWidth;
const height = window.innerHeight;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
let animationFrame = null;
//开始路径
ctx.beginPath();
const zero = performance.now();
console.log(zero);
requestAnimationFrame(animate);
//draw(100)
//闭合路径
ctx.closePath();
//描述
ctx.stroke();
</script>
</html>
