专栏首页一个小程序员的成长笔记Canvas 图片绕边旋转的小动画

Canvas 图片绕边旋转的小动画

/**
 * 图片绕边旋转的小动画
 */
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);
    }
}

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas 图片平铺设置

    /** * 图片平铺 */ function initDemo7(){ var canvas = document.getElementById("...

    就只是小茗
  • Canvas 给图形绘制阴影

    /** * 图形绘制阴影 */ function initDemo6() { var canvas = document.getElementByI...

    就只是小茗
  • 网页结构与表现原则

    网页的结构与表现原则总的来说为: 先按结构和语义编写代码 然后进行CSS样式设置 减少HTML与CSS契合度(精简页面结构) 我们可以通过一个微博用户发言信息列...

    就只是小茗
  • Web实战:如何进行视频截图

    由于前段时间事情比较多,文章的更新就给耽误了,项目需要上线经常加班,再加上自己的一些学习计划,一晃就是一个多月,没有更新文章。

    六小登登
  • 移动开发之浅析cocos2d-x的中文支持问题

      题记:这阵子一直在学习cocos2d-x,其跨平台的特性确实让人舒爽,引擎的框架概念也很成熟,虽然相应的第三方工具略显单薄,但也无愧是一件移动开发的利器啊,...

    用户2615200
  • 移动搜索三国杀,谁能代表未来趋势?

    伴随着各类APP应用的崛起,移动搜索使用频率正在降低,移动入口的作用地位也正在弱化。不过,移动搜索领域依旧不乏激烈的竞争,虽然没有浓厚的火药味,实际上暗中的较量...

    罗超频道
  • struts核心配置文件详解(package)

    爱撒谎的男孩
  • 7. 面向对象编程思想(OOP)【Kotlin 极简教程】

    一个会写诗的程序员
  • 这个机器人太牛了,陌生物体抓取识别成功率高达100%

    给杂货拆包是一件简单但乏味的工作:手伸进包里,摸索着找到一件东西,然后把它拿出来。简单瞄一眼之后,你会了解这是什么东西,它应该存放在哪里 如今,麻省理工学院和普...

    机器人网
  • 修改Hexo自动生成的HTML文件名

    我们在使用Hexo框架生成静态博客时,其实是将你写好的.md文件输出成HTML文件进行渲染,其中HTML的文件名称就是.md的文件名称。

    编程大道

扫码关注云+社区

领取腾讯云代金券