首先在页面中创建一个canvas标签：

<body>

<canvas id="c1" width="500" height="500"></canvas>

</body>

js部分：

注意save()和restore()的运用，在num累加的情况下，保存路径和恢复路径可以让方块匀速运动；

定义变量num和value来设置临界点的方法。

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    var num = 0;

    var num2 =0;

    var value = 1;

    setInterval(function(){

        num++;

        oGC.save();          //让旋转匀速运动 不然num值是累加的 旋转角度越来越大

        oGC.clearRect(0,0,oC.width,oC.height);

        oGC.translate(200,200);

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

        //这里设置缩放效果  利用num2和value值的关系控制缩放的临界点

        if(num2==100){

            value = -1;

        }else if(num2==0){

            value = 1;

        }

        num2 += value;

        oGC.scale(num2*(1/50),num2*(1/50));

        oGC.translate(-50,-50);

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

        oGC.restore();

    },30)

}；

</script>

canvas实例：旋转缩放的方块的更多相关文章

  1. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

    超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...

  3. osg矩阵变换节点-----平移旋转缩放

    osg矩阵变换节点-----平移旋转缩放 转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...

  4. osg中使用MatrixTransform来实现模型的平移/旋转/缩放

    osg中使用MatrixTransform来实现模型的平移/旋转/缩放 转自:http://www.cnblogs.com/kekec/archive/2011/08/15/2139893.html# ...

  5. Blender模型导入进Unity，旋转缩放的调整

    Blender跟Unity的XYZ轴不同的原因,导致Blender模型导入Unity之后会发生模型朝向不对. 请先看看下边这个情况: 首先,Blender物体模式下,对模型进行 旋转 缩放,将会在右边 ...

  6. html5 canvas旋转+缩放

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

  7. canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  8. 第八讲：HTML5中canvas实现小球击打小方块游戏

    源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...

  9. Android图片旋转,缩放,位移,倾斜,对称完整示例(一)——imageView.setImageMatrix(matrix)和Matrix

    MainActivity如下: import android.os.Bundle; import android.view.MotionEvent; import android.view.View; ...

随机推荐

  1. Mysql和Oracle的一些语法区别

    作为一个有追求的程序猿,当然要不断的学习,巴拉巴拉巴拉...好了,贴一个网址给大家,哈哈 MySQL与Oracle 差异比较:http://www.cnblogs.com/HondaHsu/p/364 ...

  2. Python3基础 map 与 lambda表达式配合 将指定系列元素乘2

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  3. PHP连接和拆分数组array_combine()和array_slice()用法示例

    一提起数组,可能很多PHP初学者会觉得难,但开发一些高级应用的时候,又离不开数组的使用.下面就来说下,PHP使用array_combine()函数来连接数组.用array_slice()函数来拆分数组 ...

  4. php 禁用eval( )函数

    php的eval函数并不是系统组件函数,因此我们在php.ini中使用disable_functions是无法禁止它的. 但是eval()对于php安全来说具有很大的杀伤力,因此一般不用的情况下为了防 ...

  5. Voilin 之 握弓

    握弓要像拿杯子,手要圆:整个手型是左倾.

  6. 2.12. 后端 SQL 的可见性（Core Data 应用程序实践指南）

    上一节已经插入了数据,非常好.但是,我得更进一步.要知道里面究竟发生了什么,持久化存储区的数据有什么变化,生成了哪些查询语句.每次运行程序时,是否重复插入了对象. 有一个调试选项可以提供足够的信息,开 ...

  7. BZOJ2733 永无乡【splay启发式合并】

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  8. SQL 日期筛选的两种方式

    主要解决的是后一天的问题~容易漏掉最后一天~第一种方法,拼接String,第二种方法直接在最后一天加一天 第一: <if test="beginDate != null and beg ...

  9. HDU -2100-Lovekey

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2100 这题开始一直想着先把26进制转换成10进制,在转换成26进制,又200个字符因而行不通, 直接卡 ...

  10. c#使用DotNetZip封装类操作zip文件(创建/读取/更新)实例

    DotnetZip是一个开源类库,支持.NET的任何语言,可很方便的创建,读取,和更新zip文件.而且还可以使用在.NETCompact Framework中.  下载地址在这里:http://dot ...