canvas浅谈实现简单的自旋转下落

旋转和平移是2个基础的动画效果,也是复杂动画的基础。

如果是普通的页面只要设置transform属性很容易实现平移+旋转的组合效果，达到自旋转下落的效果。因为操作的直接是动作元素本身很容易理解。

但是在canvas中，如果要实现一个旋转，是需要旋转画布来实现。

如下图：

实现代码

function createRect() {var anger = 0,//旋转角度rectW = 200,//宽度rectH = 200,//高度posy = 0;cxt.strokeStyle = 'black';cxt.strokeRect(100, posy, rectW, rectH);setInterval(function() {cxt.beginPath();cxt.strokeStyle = 'red';cxt.save();//保存此时状态/*移动画布原点到旋转物体的中点*/cxt.translate(100 + rectW / 2, posy + rectH / 2);/*旋转画布*/cxt.rotate(anger * Math.PI / 180);/*将画布原点回归到（0,0） 注意这里虽然画布原点还原了但是角度没有还原*/cxt.translate(-100 - rectW / 2, -posy - rectH / 2);cxt.strokeRect(100, posy, rectW, rectH);/*还原画布*/cxt.restore();anger = anger + 5;//每帧的变化角度posy = posy + 5;}, 16)
}

这里save() 和 restore()的属性还是比较重要的。用来还原画布位置。而不用通过计算返回。非常方便。

转载于:https://www.cnblogs.com/enmeen/p/5742596.html

canvas浅谈实现简单的自旋转下落相关推荐

BIT的浅谈，简单理解
转博客园(地址):http://www.cnblogs.com/justforgl/archive/2012/07/27/2612364.html 先看一下这个图,可以找到一定的规律: 数组A的下标 ...
浅谈Git的基本工作流程与简单的Git命令
浅谈Git的基本工作流程与简单的Git命令什么是GIT? 定义:是一个开源的分布式版本控制工具功能: 代码备份版本控制协同开放代码追溯场景: 团队协同开放项目 Git仓库工作流程 Git常 ...
浅谈html的语义化和一些简单优化,html标签语义化
1.什么是语义化? 必应网典的解释语义化是指用合理HTML标记以及其特有的属性去格式化文档内容.通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的(X)HTML文档有助于提升你的 ...
2-路插入排序c语言算法,浅谈2路插入排序算法及其简单实现
2路插入排序算法是在直接插入排序算法的基础上增加了一个辅助数组,其目的是减少排序过程中的移动次数,需要增加n个记录的辅助空间. 难点可能在于对取余的考虑吧,可以把辅助数组看成一个环状空间,这样就能更好 ...
浅谈html的语义化和一些简单优化,浅谈HTML的语义化和一些简单优化
下面小编就为大家带来一篇浅谈HTML的语义化和一些简单优化.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.什么是语义化? 必应网典的解释语义化是指用合理HTML标 ...
浅谈操作系统是如何工作的及简单的进程调度的linux实现
浅谈操作系统是如何工作的及简单的进程调度的linux实现 1)进程的启动和切换机制 a)进程的启动机制保存ebp的值到栈, 将esp的值保存在prev->thread.sp,在下一步esp的值 ...
laytpl语法_浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式 laytpl 模板语法 {{ d.field }} 输出一个普通字段,不转义html 官方的说明但d.field 为空时会显示nu ...
浅谈简单线性回归(Simple linear regression)part3SEE,MSE,SSE的关系
浅谈简单线性回归(Simple linear regression)part3SEE,MSE,SSE的关系 MSE→均方根误差(各数据偏离真实值差值的平方和的平均数 )→Meansquared e ...
浅谈cocos2d游戏中天气系统的简单实现
一.前言此博客由一个新手游戏程序编写,没有高深的技术,基本是天气效果表现和代码设计的浅谈,如果有更好的实现方法,欢迎指正. 二.背景该系统设计背景:2D游戏.正交45度表现地图.以及同一张地图上存 ...

canvas浅谈实现简单的自旋转下落

canvas浅谈实现简单的自旋转下落相关推荐

最新文章

热门文章

canvas浅谈 实现简单的自旋转下落

canvas浅谈 实现简单的自旋转下落相关推荐

最新文章

热门文章

canvas浅谈实现简单的自旋转下落

canvas浅谈实现简单的自旋转下落相关推荐