/**
* 图片绕边旋转的小动画
*/
function initDemo10() {
var canvas = document.getElementById("demo10");
if (!canvas) {
return;
}
var context = canvas.getContext("2d");
var img = new Image();
img.src ="images/timg3.jpg";
img.onload = function () {
var i = 0;
var i_symbol = 1;
var j = 0;
var j_symbol = 1;
setInterval(function () {
context.clearRect(0, 0, canvas.width, canvas.height);
if (i <= 0 && j <= 0){
i_symbol = 1;
j_symbol = 0;
}else if (i >= (canvas.width - img.width) && j <= 0){
i_symbol = 0;
j_symbol = 1;
}else if (i >= (canvas.width - img.width) && j >= (canvas.height - img.height)){
i_symbol = -1;
j_symbol = 0;
}else if (i <= 0 && j >= (canvas.height - img.height)){
i_symbol = 0;
j_symbol = -1;
}
i += i_symbol;
j += j_symbol;
context.drawImage(img, i, j);
}, 10);
}
}

Canvas 图片绕边旋转的小动画的更多相关文章

  1. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  2. canvas 图片拖拽旋转之一——坐标转换translate

    引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...

  3. Html5 Canvas动画旋转的小方块;

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

  4. Core Animation一些Demo总结 (动态切换图片、大转盘、图片折叠、进度条等动画效果)

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果 ...

  5. canvas实现跟随鼠标旋转的箭头

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

  6. 如何制作网页小动画?——gif or png

    一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...

  7. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

  8. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  9. TabbarItem超炫小动画

    本文转载自 不灭的小灯灯  的博客 Tabbar点击时候超炫小动画 感谢这位大神的分享! 对UITabBarController上TabBar按钮动画详细介绍-->>保证你有意外收获,如有 ...

随机推荐

  1. C#通过反射进行枚举描述相关操作

    C#可以通过反射,来获取枚举的描述信息或通过描述信息获取到指定类型的枚举 /// <summary> /// 获取枚举描述 /// </summary> /// <par ...

  2. mybatis按时间条件搜索

    dto接受前台字符串时间格式 @DateTimeFormat(pattern = "yyyy-MM-dd") private Date contractStartDt; @Date ...

  3. Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码(百度首页搜索录入框及登录链接)

    此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...

  4. javaWeb 在jsp中 使用自定义标签输出访问者IP

    1.java类,使用简单标签,jsp2.0规范, 继承 SimpleTagSupport public class ViewIpSimpleTag extends SimpleTagSupport { ...

  5. jquery ajax异步调用

    写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var ...

  6. 2.13. 获取托管对象(Core Data 应用程序实践指南)

    用NSFetchRequest获取NSArray,里面都是托管对象.如果上下文里没有数据,就会从持久化存储区里获取. NSFetchRequest *request = [NSFetchRequest ...

  7. 完成OSS.Http底层HttpClient重构封装 支持标准库

    OSS.Http项目对于.Net Standard标准库的支持已经迁移完毕,OSS开源系列两个最底层的类库已经具备跨运行时支持的能力.由于OSS.Http类库是几年前我参照RestSharp的思路,完 ...

  8. ctf writeup之程序员密码

    起因 在v2ex上看到有人发了一篇帖子,说做了一个程序员小游戏,遂试玩了一下. 游戏的地址在这里: http://www.bettertomissthantomeet.com/pages/level. ...

  9. ECS之Git服务器搭建

    最简教程 ### . 安装Git 安装Git服务,命令如下: ```Shell $ yum install curl-devel expat-devel gettext-devel openssl-d ...

  10. Beta 冲刺 五

    团队成员 051601135 岳冠宇 031602629 刘意晗 031602248 郑智文 031602330 苏芳锃 031602234 王淇 照片 项目进展 岳冠宇 昨天的困难 数据交换比较复杂 ...