canvas绘制动画

我是一只代码狗

已于 2024-01-02 14:41:15 修改

阅读量220

点赞数

分类专栏： vue 文章标签： javascript 前端 html

于 2024-01-02 13:01:34 首次发布

原文链接：https://mp.csdn.net/mp_blog/creation/editor?spm=1001.2101.3001.5352

版权

vue 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

位移

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            background-color: red;
        }
    </style>
   
</head>
<body>
    <script>
        //创建canvas
        var canvas=document.createElement('canvas')
        //设置宽高
        canvas.width=600;
        canvas.height=600;
        //把标签放入body
        document.body.append(canvas)
        //创建画笔
        var context=canvas.getContext('2d');

        //创建位移，要在方形之前 x,y轴 起点为原点(0,0)的位置
        context.translate(100,100)

        //创建方形 x,y,宽，高
        context.fillRect(0,0,100,100)
        
    </script>
</body>
</html>

旋转

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            background-color: red;
        }
    </style>
   
</head>
<body>
    <script>
        //创建canvas
        var canvas=document.createElement('canvas')
        //设置宽高
        canvas.width=600;
        canvas.height=600;
        //把标签放入body
        document.body.append(canvas)
        //创建画笔
        var context=canvas.getContext('2d');

        //创建位移，要在方形之前 x,y轴 起点为原点(0,0)的位置
        context.translate(200,200)

        //旋转45弧度
        context.rotate(45*Math.PI/180)

        //创建方形 x,y,宽，高
        context.fillRect(0,0,100,100)
        
    </script>
</body>
</html>

图形缩放

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            background-color: red;
        }
    </style>
   
</head>
<body>
    <script>
        //创建canvas
        var canvas=document.createElement('canvas')
        //设置宽高
        canvas.width=600;
        canvas.height=600;
        //把标签放入body
        document.body.append(canvas)
        //创建画笔
        var context=canvas.getContext('2d');
        //缩放 默认1,1 x,y轴 大于1就是扩大, 小于1就是缩小 
        context.scale(1,1)

        //创建方形 x,y,宽，高
        context.fillRect(0,0,100,100)
        
    </script>
</body>
</html>

变换

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            background-color: red;
        }
    </style>
   
</head>
<body>
    <script>
        //创建canvas
        var canvas=document.createElement('canvas')
        //设置宽高
        canvas.width=600;
        canvas.height=600;
        //把标签放入body
        document.body.append(canvas)
        //创建画笔
        var context=canvas.getContext('2d');
       
        //位移 旋转 缩放集一体
        //a: x轴扩大 缩小 默认是1
        //b: 向下倾斜 0是不倾斜
        //c: 向上倾斜 0是不倾斜
        //d: y轴扩大缩小 默认1
        //e: x轴移动位置
        //f: y轴移动位置
        context.transform(1,30*Math.PI/180,30*Math.PI/180,1,100,200)

        //创建方形 x,y,宽，高
        context.fillRect(0,0,100,100)
        
    </script>
</body>
</html>

从左边移动到右边

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
   
</head>
<body>
    <script>
        //创建canvas
        var canvas=document.createElement('canvas')
        //设置宽高
        canvas.width=600;
        canvas.height=600;
        //把标签放入body
        document.body.append(canvas)
        //创建画笔
        var context=canvas.getContext('2d');
    
        
       
        var x=0;
        function aa(){
            x++;
            //清除之前的方形 这样就不会连起来了
            context.clearRect(0,0,canvas.width,canvas.height)

            //创建方形 x,y,宽,高
            context.fillRect(x,100,100,100)
            //递归调用
            requestAnimationFrame(aa)
        }
        //让aa动起来
        requestAnimationFrame(aa)
    </script>
</body>
</html>

小球动起来

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            background-color: cadetblue;
            margin: 0 auto;
            display: block;
        }
    </style>
   
</head>
<body>
    <script>
        //创建canvas
        var canvas=document.createElement('canvas')
        //设置宽高
        canvas.width=600;
        canvas.height=600;
        //把标签放入body
        document.body.append(canvas)
        //创建画笔
        var context=canvas.getContext('2d');
        let x=0;
        let y=0;


        function aa(){
            context.clearRect(0,0,canvas.width,canvas.height)
            //保存
            context.save()
            //画太阳
            context.beginPath()
            context.fillStyle='yellow';
            //画圆x,y,半径,开始角度,结束角度
            context.arc(300,300,100,0,2*Math.PI)
            //绘制线
            context.fill();
            context.closePath()

            //画地球
            context.beginPath()
            context.fillStyle='blue';
            //先把原点移动到正中心的位置
            context.translate(300,300)
            //旋转角度
            context.rotate((x+=0.5)*Math.PI/180)
            //为了画月亮 在把地球移动
            context.translate(190,0)
            //画圆x,y,半径,开始角度,结束角度
            context.arc(0,0,30,0,2*Math.PI)
            //绘制线
            context.fill();
            context.closePath()

            //画月亮
            context.beginPath()
            context.fillStyle='red';
            //按照地球的位置移动
            context.translate(5,0)
            //转动角度
            context.rotate((y+=1)*Math.PI/180)
            //画圆x,y,半径,开始角度,结束角度
            context.arc(60,0,10,0,2*Math.PI)
            //绘制线
            context.fill();
            context.closePath()

            //释放
            context.restore();

            requestAnimationFrame(aa)
        }

        requestAnimationFrame(aa)
    </script>
</body>
</html>