一、绘制图片

①加载图片

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas做动画</title>

</head>

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas=document.querySelector('canvas');

        var ctx=myCanvas.getContext('2d');

        // 创建对象

        var image=new Image();

        // 绑定加载完成事件

        image.onload=function(){

            // 这里进行图片相关的绘制

            console.log(image);//<img src='1.jpg'>

        }

        // 设置图片路径

        image.src='1.jpg';

    </script>

</body>

</html>

②三个参数：drawImage（img，x，y）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas做动画</title>

    <style>

        canvas{

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas=document.querySelector('canvas');

        var ctx=myCanvas.getContext('2d');

        var image=new Image();

        image.onload=function(){

            /* *

            *ctx.drawImage(image,x,y)

            *image是图片对象,canvas对象,video对象

            *x和y表示绘制起点,从图片的左上角开始

            */

            ctx.drawImage(image,100,100);

        }

        image.src='1.jpg';

    </script>

</body>

</html>

③五个参数：drawImage（img，x，y，w，h）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas做动画</title>

    <style>

        canvas{

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas=document.querySelector('canvas');

        var ctx=myCanvas.getContext('2d');

        var image=new Image();

        image.onload=function(){

            /* *

            *ctx.drawImage(image,x,y,w,h)

            *image是图片对象,canvas对象,video对象

            *x和y表示绘制起点,从图片的左上角开始

            *w和h表示图片的大小,对图片的缩放

            */

            ctx.drawImage(image,100,100,200,200);

        }

        image.src='1.jpg';

    </script>

</body>

</html>

④九个参数：drawImage（img，x，y，w，h，x1，y1，w1，h1）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas做动画</title>

    <style>

        canvas{

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas=document.querySelector('canvas');

        var ctx=myCanvas.getContext('2d');

        var image=new Image();

        image.onload=function(){

            /* *

            *ctx.drawImage(image,x,y,w,h,x1,y1,w1,h1)

            *image是图片对象,canvas对象,video对象

            *x和y对图片的进行截取的坐标,从左上角开始

            *w和h表示截取图片的大小,对图片的截取

            *x1和y1是表示绘制起点,从图片的左上角开始

            *w1和h1是表示图片的大小,对图片的缩放

            *x,y,w,h是对图片的操作

            *x1,y1,w1,h1是对画布上的操作

            */

            ctx.drawImage(image,100,100,200,200,100,100,200,200);

        }

        image.src='1.jpg';

    </script>

</body>

</html>

二、帧动画

①首先需要一张精灵图，里面有一组可以连续起来做动画的人或者物

②可以动态的获取图片上主体人或者物的大小尺寸

③通过drawImage( )获取图片上的主体人或者物

④根据索引，在固定的时间间隔内（定时器），更换图片，从而达到动起来的效果，实现帧动画

三、坐标变换

①平移：translate（x，y）参数表示画布的原点的坐标

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas做动画</title>

    <style>

        canvas{

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas=document.querySelector('canvas');

        var ctx=myCanvas.getContext('2d');

        // 第一个矩形

        ctx.beginPath();

        ctx.fillRect(100,100,200,100);

        // 第二个矩形,移动translate(x,y) 是对原点的移动

        ctx.beginPath();

        ctx.translate(100,100);

        ctx.fillStyle='red';

        ctx.fillRect(100,100,200,100);

    </script>

</body>

</html>

②缩放：scale（x，y）参数表示画布坐标的缩放

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas做动画</title>

    <style>

        canvas{

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas=document.querySelector('canvas');

        var ctx=myCanvas.getContext('2d');

        // 第一个矩形

        ctx.beginPath();

        ctx.fillRect(100,100,200,100);

        // 第二个矩形,移动scale(x,y) 是对画布坐标的缩放

        ctx.beginPath();

        ctx.scale(0.5,0.5);

        ctx.fillStyle='red';

        ctx.fillRect(100,100,200,100);

    </script>

</body>

</html>

③旋转：rotate（angle）参数表示旋转的角度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas做动画</title>

    <style>

        canvas{

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas=document.querySelector('canvas');

        var ctx=myCanvas.getContext('2d');

        ctx.translate(200,200);

        setInterval(function(){

            // rotate(angle)默认是以画布原点的位置为圆心进行旋转

            // 通过translate(x,y)可以对画布原点进行移动

            angle=Math.PI/90;

            ctx.rotate(angle);

            ctx.strokeRect(0,0,100,100);

        },100);

    </script>

</body>

</html>

canvas做动画的更多相关文章

  1. 用Canvas做动画

    之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑.最近看的<HTML5+JavaScript 动画基础>这个是译本,Keith Peters曾写过 ...

  2. canvas小球动画原理

    随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...

  3. 使用requestAnimationFrame做动画效果二

    3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...

  4. 让CALayer的shadowPath跟随bounds一起做动画改变-b

    在iOS开发中,我们经常需要给视图添加阴影效果,最简单的方法就是通过设置CALayer的shadowColor.shadowOpacity.shadowOffset和shadowRadius这几个属性 ...

  5. Android使用XML做动画UI

    在Android应用程序,使用动画效果,能带给用户更好的感觉.做动画可以通过XML或Android代码.本教程中,介绍使用XML来做动画.在这里,介绍基本的动画,如淡入,淡出,旋转等. 效果: htt ...

  6. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

  7. [UWP]用Shape做动画

    相对于WPF/Silverlight,UWP的动画系统可以说有大幅提高,不过本文无意深入讨论这些动画API,本文将介绍使用Shape做一些进度.等待方面的动画,除此之外也会介绍一些相关技巧. 1. 使 ...

  8. [UWP]用Shape做动画(2):使用与扩展PointAnimation

    上一篇几乎都在说DoubleAnimation的应用,这篇说说PointAnimation. 1. 使用PointAnimation 使用PointAnimation可以让Shape变形,但实际上没看 ...

  9. transition和animation做动画（css动画二）

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...

随机推荐

  1. 【Oracle】获取SQL执行计划

    一.plsql developer工具F5         在sqldeveloper中选中sql按F5即可查看执行计划         

  2. Python 读取excel指定的列

    一.摘要 在这篇文章中: https://www.cnblogs.com/xiao987334176/p/9330368.html#autoid-4-5-2 介绍了使用 xlrd 模块,读取指定坐标的 ...

  3. linux 查询某个时间段的日志

    目前因发生了异常大概记得发生的时间段,想查看这个时间段的日志 如我们的日志格式如下 1:09:59.946 [http-nio-12129-exec-10] INFO ntroller start = ...

  4. RSA非对称 私钥加密

    RSA生成公钥和私钥对 /// <summary> /// RSA生成公钥和私钥 /// </summary> /// <returns></returns& ...

  5. 用GraphicsMagick处理svg转png遇到的坑

    1前言 用GraphicsMagick处理svg转png,且背景是透明且没有黑边,由于使用虚拟机的gm版本是1.3.28导致有黑边问题且svg中path中有opacity属性时,加上+antialia ...

  6. 2019 东软java面试笔试题 （含面试题解析）

    本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.东软等公司offer,岗位是Java后端开发,最终选择去了东软. 面试了很多家公司,感觉大部分公司考察的点都差不多 ...

  7. Java 之 Jedis

    一.客户端 Jedis 1.Jedis Jedis 是一款java操作 redis 数据库的工具. 2.使用步骤 (1)下载 Jedis 的 jar 包 (2)使用: //1. 获取连接 Jedis ...

  8. Maven整合eclipse

    1.配置eclipse本地Maven 点击Window-->Perference 选择Maven-->Installations 点击Add添加本地Maven   然后勾选本地Maven, ...

  9. Linux无法被远程登录；用户的关机， 重启，注销，新增用户，删除用户

    不能使用xshell连接到我的Linux服务器 通过再windows的cmd中ping了我的Linux地址,发现网络不通. 查看百度发现是因为网络没有选桥接模式,然后选完桥接模式告诉我: 然后发现没有 ...

  10. linux中apt-get使用

    apt-get简介 在Ubuntu系统中,经常要用到apt-get install指令来安装软件,由于常常需要root权限来操作,所以搭配sudo食用口感更佳,apt-get指令对于安装.卸载.升级软 ...