<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Canvas</title>

    <script type="text/javascript" src="jQuery.js"></script>

</head>

<style type="text/css">

    body {

        padding: 0;

        margin: 0;

        background: black;

    }

    #canvas {

        background: white;

        margin: 100px 0 0 300px;

    }

    #canvas>span {

        color: white;

        font-size: 14px;

    }

</style>

<body>

    <canvas id="canvas" width="600" height="500">

    <span>您的浏览器不支持</span>

</canvas>

</body>

</html>

<script type="text/javascript">

    /*获取绘制环境*/

    var oc = $('#canvas')[0];

    var canvas = oc.getContext('2d');

    /*偏移*/

    canvas.translate(200, 200);

    var num = 0, multiple = 1, value = 1;

    setInterval(function(){

        num++;

        if(multiple == 100 || multiple == 0){

            value *= -1;

        }

        multiple += value;

        /*局面canvas的起始点*/

         canvas.save();

         /*图形倍数(横向放大倍数,纵向放大倍数)*/

         canvas.scale(multiple*1/50, multiple*1/50);

         /*清理屏幕由于圆点被偏移,画布的坐标也跟着发生偏移*/

        canvas.clearRect(-150, -150, oc.width, oc.height);

        /*旋转弧度*/

        canvas.rotate(num*Math.PI/180);

        /*偏移旋转中心*/

        canvas.translate(-50, -50);

        /*填充方块*/

        canvas.fillRect(0, 0, 100, 100);

        /*局面canvas的结束点*/

        canvas.restore();

    }, 30);

</script>

HTML5 Canvas 小例子 伸缩旋转方块的更多相关文章

  1. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  2. HTML5 Canvas 小例子 旋转的时钟

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas 小例子 简易画板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  5. HTML5 Canvas小游戏基础：用户交互

    交互是游戏的根本.缺少了用户交互,游戏就不能称之为游戏,只能说是动画或电影.事件是浏览器响应用户交互操作的一种机制. 1．事件和事件执行 事件定义了用户与页面交互时产生的各种操作(主要通过鼠标或热键的 ...

  6. html5 canvas多个图像旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. WPF Canvas小例子

    源码下载:DraggingElementsInCanvas_demo.rar

  8. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

随机推荐

  1. java.lang.NoClassDefFoundError: com/sun/image/codec/jpeg/JPEGCodec 解决方案

    使用java生成图片的时候,报了java.lang.NoClassDefFoundError: com/sun/image/codec/jpeg/JPEGCodec 错误. 根据这个类的api说明,在 ...

  2. android 退出程序解决内存释放so的问题

    做Android程序的时候发现一个问题,由于用到了so库,当应用程序退出了,但是手机变得很卡,点击"设置"查看应用程序,界面显示着可以点击"强制关闭". 由于这 ...

  3. P2430严酷的训练

    传送 这个题的题干很长,长到令人恶心 这个题的p乍一看好像没有卵用,但其实他很有用(废话).这里的“费用”不再是tw[i](wky做第i道题的时间),而是tw[p[i]](wky做第i道题所对应的知识 ...

  4. 其他类想使用unittest的断言方法，就import unittest的框架，继承他，使用他里面的方法

    在断言层 也可以同样用这个方法

  5. 廖雪峰Java2面向对象编程-6Java核心类-1字符串和编码

    Java的字符串用String表示 1.String特点: 可以直接使用"..."表示一个字符串,不强制使用new String 内容不可变 String s1 = "h ...

  6. 面向对象的轮播js

    1.自执行函数的前后要加分号 案例: ;(function(){})(); 2.面向对象的最大优势节省了许多内存 正式开写面向对象的轮播: <!DOCTYPE html> <html ...

  7. Jmeter（六）Jmeter脚本包含要素及书写习惯

    Jmeter有丰富的组件,逻辑控制器.配置原件.Sampler.定时器.前置处理器.后置处理器.断言.监听器:而编写脚本一定要养成个人习惯,让人看到Jmeter的脚本目录结构树能够一目了然:因此,首先 ...

  8. [UE4]创建动画的3中方法

    一.基于现有动画的骨骼,从头开始创建一个全新的动画.(不推荐) 选中左边的骨骼节点做旋转变化. 调整完成了别忘记点击添加“Key”以创建一个关键帧,然后再保存. 二.基于当前动画的姿势创建一个动画.( ...

  9. 网站简介-为什么网站的ICO图标更新后，ie浏览器没有更新过来？

    为什么网站的ICO图标更新后,ie浏览器没有更新过来? 如何更新本地ico图标? 收藏夹里的网址访问后网站ico小图标怎么不会更新,还是没图标的. 如果制作了一个新的favicon.ico图标,并且已 ...

  10. POJ K-th Number

    [题解] 数据结构采用线段树.通过将数组的每一段归并排序来建树.将数组排序来实现离散化. 时间复杂度分析:建树的过程就是归并排序,其时间复杂度为O(nlog(n)).查询时:二分查找第k小元素的复杂度 ...