一、绘制图片

①加载图片

<!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. Locust性能测试_先登录场景案例

    前言 有很多网站不登录的话,是无法访问到里面的页面的,这就需要先登录了实现场景:先登录(只登录一次),然后访问页面->我的地盘页->产品页->项目页 官方案例 下面是一个简单的loc ...

  2. js获取对象的属性个数

    for (var i = 0; i < dt.length; i++) { if (Object.keys(dt[i]).length <= 1) { dt.splice(i, 1); i ...

  3. RStudio中安装factoextra包的问题

    最近在做一个R语言的小作业,其中聚类分析部分需要用到factoextra安装包,在RStudio中输入install.packages("factoextra")之后,就一直出现“ ...

  4. loj#10013 曲线(三分)

    题目 #10013. 「一本通 1.2 例 3」曲线 解析 首先这个题保证了所有的二次函数都是下凸的, \(F(x)=max\{s_i(x)\}i=1...n\)在每一个x上对应的最大的y,我们最后得 ...

  5. 自学Python编程的第一天----------来自苦逼的转行人

    学习Python的第一天,也是我第一次写博客的一天,不怎么会写博客,也不怎么会Python,也不怎么会写总结.在学Python的第一天发现自己脑子不是很好用,在学习过程中出现很多错误,错误锦集如下,哈 ...

  6. TCP三次握手四次挥手介绍

    学过计算机网络的同学都知道TCP协议是计算机网络课程里面最复杂的协议之一,还没有通信就要搞个什么三次握手,断开还要什么四次分手,中间还要什么流量控制啦,拥塞控制,滑动窗口什么的,初学者看了就会头晕. ...

  7. vue请求简单配置

    简单记录一下vue的http请求配置相关 测试环境请求接口设置: 1.  config/dev.env.js添加: module.exports = merge(prodEnv, { NODE_ENV ...

  8. Flask项目初始化

    数据库实现命令初始化 1.实现命令主脚本 # coding=utf-8 from functools import wraps from getpass import getpass import s ...

  9. oracle 如何预估将要创建的索引的大小

    一.1  oracle 如何预估将要创建的索引的大小 oracle 提供了2种可以预估将要创建的索引大小的办法: ①  利用包 Dbms_space.create_index_cost 直接得到 ②  ...

  10. layui加载显示问题

    1.layui.config({ base: '../layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use(['i ...