Canvas 动画制作

在前面的两篇文章Canvas 基本绘制(下)Canvas 基本绘制(上)中,介绍了Canvas的基本绘制。学过SVG的童鞋应该知道它是可以制作动画,那么Canvas是否能制作动画呢?答案是肯定的。所以今天我们就给大家来介绍一下Canvas制作动画。

Canvas动画制作原理

简单一句话概括:不断的绘制与清除。

Canvas实现动画步骤(不断循环)

1、更新绘制的对象(比如位置的移动)

2、清除画布

3、在画布上重新绘制对象

Canvas 动画相关命令

clearRect方法

context.clearRect(x,y,width,height);方法清空给定矩形内的指定像素。

save与restore方法

所有的 2D 绘图上下文属性都是可保存和恢复的属性,但绘制的内容可不是,也就是说你恢复了绘图上下文,并不会恢复其所绘制的图形。

用来保存Canvas的状态(类似数组的入栈操作)。

用来恢复Canvas之前保存的状态(类似数组的出栈操作)。

这种状态包括:strokeStyle, fillStyle, lineWidth, lineCap, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline。

save与restore方法实例操作

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5学堂</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
    <style>
        .draw {
            margin: 30px 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="testCanvas" width="1000" height="500" class="draw"></canvas>
    <script>
        var testCanvas = document.getElementById("testCanvas");
        // 获取getContext()对象
        var context = testCanvas.getContext("2d");
 
        context.fillStyle = "red";
        context.fillRect(10, 10, 150, 150);
        // 保存状态(红色)
        context.save();
 
        context.fillStyle="green";
        context.fillRect(150, 150, 170, 170);
        // 保存状态(绿色)
        context.save();
 
        // 恢复状态(红色)
        context.restore();
        context.fillRect(250, 250, 170, 170);
 
        // 恢复状态(绿色)
        context.restore();
        context.fillRect(380, 380, 170, 170);
        context.beginPath();
    </script>
</body>
</html>

效果图

Canvas动画制作实例

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5学堂</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
    <style>
        .wrap {
            width: 1024px;
            height: 800px;
            margin: 0 auto;            
        }
        .wrap canvas {
            border: 1px solid #999;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <canvas width="1024" height="600">
            您的浏览器不支持canvas!
        </canvas>    
    </div>
    <script>
        var testCanvas = $("canvas")[0];
        var context = testCanvas.getContext("2d");
        var x = 0;
        var y = 0;
        var timer = null;
 
        // 思路:进行清画布 再次绘制(循环操作)
 
        /*
         * 功能:Canvas动画绘制
         * author:HTML5学堂、刘国利、陈能堡
         *
         */
        function draw(){
            // 不断改变绘制对象的水平位置
            x++;
            // 清除画布
            context.clearRect(0, 0, 1024, 600);
            context.beginPath();
            context.fillStyle = "red";
            context.arc(x, 150, 100, 0, 2 * Math.PI, true);
            context.closePath();
            // 绘制轮廓
            context.stroke();
            // 填充颜色
            context.fill();
        }
 
        // 设置计时器
        setInterval(draw, 20);
    </script>
</body>
</html>

效果图

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-08-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CSDN技术头条

HTML基础知识总结

几个工具: IETester:多版本IE测试 Expression Web DreamWeaver 美工页面 XHTML:符合XML标准的HTML。 标签...

2675
来自专栏欧阳大哥的轮子

Android中的视图焦点Focus的详细介绍

在非触摸屏设备中接收事件和处理响应的控件是具有焦点(Focused)的控件。一个窗口中一个时间内只能有一个具有焦点的控件。在早期具有滚轮设备的android系统...

1392
来自专栏十月梦想

jquery高级选择器第一部分

        上一篇简单的介绍了jquery的基础选择器,准备把高级选择器部分分为三篇博文介绍!慢工出细活吗,循序渐进相信jq会和css一样顺手,废话不少了接...

692
来自专栏HTML5学堂

Canvas 基本绘制(上)

HTML5学堂:之前的文章与大家分享了SVG的一系列操作,但是SVG也是存在一些劣势,所以今天开始为大家分享介绍HTML5 Canvas的相关知识,Canvas...

39513
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种常用控件

本篇为大家简单介绍Windows 商店应用中控件的用法,为方便讲解,我们在文本控件和按钮控件这两类中分别挑选有代表性的控件进行详细说明。 1. 文本控件 (1)...

3544
来自专栏用户画像

一个简单的卡动车排队系统

712
来自专栏青玉伏案

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1、<html>和</html> 标签限定了文档的开始和结束点。 属性: (1)  dir: 文本的显示方向...

2555
来自专栏青玉伏案

Web前端上万字的知识总结

下面是自己学HTML+DIV+CSS+JS时的学习笔记,给大家分享以下,相互学习。大二时候寒假在家无聊的时候想做点事,总结了一下web前端基础的东西,下面的每...

29610
来自专栏Android小菜鸡

初识MarkDown

而在 Markdown 中,只需要在文本前面加上“#” 即可,同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题,总共六级,只需要增加 “#” ...

921
来自专栏静默虚空的博客

HTML 简介

HTML 简介 超文本标记语言  (Hypertext Markup Language, HTML)  是一个可以用来结构化你的Web内容并给予其含义和目标的...

2209

扫码关注云+社区

领取腾讯云代金券