【前端】 canvas画图_前端canvas画图-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43872912/article/details/144474432

一、场景描述

利用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>