一、绘制图片

①加载图片

<!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. bootstrap-paginator + ajax 实现动态翻页功能

    1.下载http://plugins.jquery.com/bootstrap-paginator/ 2.引用<script src="/static/bootstrap/js/boo ...

  2. Hive 系列（三）—— Hive CLI 和 Beeline 命令行的基本使用

    一.Hive CLI 1.1 Help 使用 hive -H 或者 hive --help 命令可以查看所有命令的帮助,显示如下: usage: hive -d,--define <key=va ...

  3. 记CentOS 发布.NET Core 2.0

    centos 7.x sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo -e & ...

  4. for循环优化

    转自:https://blog.csdn.net/lfc18606951877/article/details/78592823 1:多个for循环时,遵循外小内大(从外至里,循环对象size要从小到 ...

  5. 长期作业：web框架源码剖析

    Tornado框架 1.1. 手动安装 1.2. 从简单的开始:分析红框部分的源码 Django框架

  6. python day 15: IO多路复用,socketserver源码培析，

    目录 python day 15 1. IO多路复用 2. socketserver源码分析 python day 15 2019/10/20 学习资料来自老男孩教育 1. IO多路复用 ''' I/ ...

  7. ORACLE SQL 笔记

    根据数据权限查询 SELECT * FROM ( SELECT ROWNUM AS ROWNO, AA.* FROM ( SELECT DISTINCT A.OBJECTID InstanceID , ...

  8. zookeeper 事务日志查看

    在version下的日志是二进制文件,查看需要转换 创建/data/middleware/zookeeper-3.4.14/translog.sh 脚本 格式化命令: java -classpath ...

  9. Java开发环境之IntelliJ IDEA

    查看更多Java开发环境配置,请点击<Java开发环境配置大全> 贰章:IntelliJ IDEA安装教程 1)去官网下载IDEA安装包 https://www.jetbrains.com ...

  10. 搭建docker本地仓库

    如果没有创建docker环境的话,需要先安装docker环境. 1. 使用命令创建容器 docker run -d -p 8081:8080 atcol/docker-registry-ui 8081 ...