一、绘制图片

①加载图片

<!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. Django开发之登陆和登出

    使用django自带的验证模块 1.首先使用python manage.py startapp models为当前项目添加一个应用. 2.在setting.py中INSTALLED_APPS后面添加' ...

  2. pytest_06_fixture之yield实现teardown

    上一篇讲到fixture通过scope参数控制setup级别,既然有setup作为用例之前前的操作,用例执行完之后那肯定也有teardown操作. 这里用到fixture的teardown操作并不是独 ...

  3. angular复习笔记2-架构总览

    angular架构总览 一个完整的Angular应用主要由6个重要部分构成,分别是:组件.模板.指令.服务.依赖注入和路由.这些组成部分各司其职,而又紧密协作,它们的关系如图所示. 与用户直接交互的是 ...

  4. Linux生产环境上，最常用的一套“Sed“技巧

    sed命令应用广泛,使用简单,是快速文本处理的利器.它其实没多少技巧,背诵.使用是最合适的学习渠道,属于硬技能.但它又很复杂,因为高级功能太多.本篇不去关注sed的高级功能,仅对常用的一些操作,进行说 ...

  5. 详细介绍：Kubernetes1.4版本的新功能

    Kubernetes1.4主要新特性 创建kubernetes集群只需要两条命令 增强了对有状态应用的支持 增加了集群联盟API 支持容器安全控制 增强包括调度在内的Kubernetes基础架构 通过 ...

  6. 溢出处理、盒子模型、背景图片、float（浮动）

    一.overflow:溢出内容的处理     overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)    overflow:auto; 自动滚动(有溢出 ...

  7. MySQL CentOS7 手动安装

    手动安装MySQL的目的: 1.一个服务器上可以同时装多个版本,甚至相同版本MySQL的多个实例,这种需求很常见: 2.一次初始化和配置后,可以快速复制到本服务器或其他服务器,及封装为初始MySQL的 ...

  8. 1M大概多少个字

    <?php echo strlen("你"); 保存文件为gbk 输出2 保存文件为utf-8 输出3 说明不同编码占用字节不同 1M=1024kB 1KB = 1024B ...

  9. PHP生成小程序二维码

    /** * [生成小程序二维码] * @return [type] [description] */ public function makeMiniQrcode_do() { begin: $id ...

  10. Java入门(二)——泛型

    如果你写过前端,可能会经常写一下关于变量类型的判断,比如:typeof fn === 'function'之类的代码.因为JavaScript作为一门弱类型语言,类型的判断往往需要开发人员自己去检查. ...