canvas实例：旋转缩放的方块
首先在页面中创建一个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实例：旋转缩放的方块的更多相关文章
- Html5 Canvas动画旋转的小方块；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
- osg矩阵变换节点-----平移旋转缩放
osg矩阵变换节点-----平移旋转缩放 转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...
- osg中使用MatrixTransform来实现模型的平移/旋转/缩放
osg中使用MatrixTransform来实现模型的平移/旋转/缩放 转自:http://www.cnblogs.com/kekec/archive/2011/08/15/2139893.html# ...
- Blender模型导入进Unity，旋转缩放的调整
Blender跟Unity的XYZ轴不同的原因,导致Blender模型导入Unity之后会发生模型朝向不对. 请先看看下边这个情况: 首先,Blender物体模式下,对模型进行 旋转 缩放,将会在右边 ...
- html5 canvas旋转+缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- 第八讲：HTML5中canvas实现小球击打小方块游戏
源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...
- Android图片旋转,缩放,位移,倾斜,对称完整示例(一)——imageView.setImageMatrix(matrix)和Matrix
MainActivity如下: import android.os.Bundle; import android.view.MotionEvent; import android.view.View; ...
随机推荐
- python 错误AttributeError: 'module' object has no attribute 'AF_INET'
写了一个简单的python socket的程序.运行时,报错如下 原因:文件的命名与Python的function的命名冲突 修改名称后,发现还是无法运行,检查目录下面是否有 这样子的一个文件,删除即 ...
- arcgis 瓦片图加载规则（转载）
arcgis 瓦片图加载规则 最近需要做地图离线的功能,要能下载指定区域的瓦片图,我们都知道如何加载谷歌和天地图的加载规则,但是网上貌似没有找到如何加载arcgis自己发布的瓦片图规则,好不容易找到一 ...
- gec210 NAND BOOT与SD BOOT启动原理
CPU上电后,此时SP指针指向0x0000_0000,从这个地址取第一条指令.但此时:PLL没有启动,CPU工作频率为外部输入晶振频率,非常低(S5PV210中晶振在CPU旁边,两颗24MHz,一颗2 ...
- //@sourceURL=filename.js
在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样 ...
- eclipse使用egit提交代码报错
在eclipse上使用插件egit同步代码时出现如下错误 解决办法: 开eclipse中的windows-->Preferences-->Team-->Git-->Config ...
- YII 1.0 发表文章用到的小物件
<?php $form = $this->beginWidget('CActiveForm',array('htmlOptions'=>array('enctype'=>'mu ...
- Angular - - $anchorScroll、$controller、$document
$anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素. 监听$location.hash()并且滚动到url指定的锚点的地方.可以通过 ...
- xshell安装运行时提示缺少mfc110.dll
下载最新的mfc110.dll文件 https://pan.baidu.com/share/link?shareid=1932421734&uk=1784696518&app=zd 之 ...
- CFD-post的奇技淫巧
此处记录两个后处理美化的技巧:1.关于contour显示的美化:2.关于legend的显示美化 1. 直接举例说明,现在cfd-post里导入了一个二维case,先建立一个plane: apply以后 ...
- jQuery children等筛选用法
jQuery children等筛选用法: <%@ page language="java" import="java.util.*" pageEncod ...