canvas实例:旋转缩放的方块
2024-08-26 08:07:19
首先在页面中创建一个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>
最新文章
- dedecms头部常用:标题,栏目描述,关键词
- java如何使用JUnit进行单元测试
- vs2013 括号自动配对样式设置
- 日期函数(sql)
- 【leetcode】Best Time to Buy and Sell (easy)
- js验证身份证号
- Map小记
- canvas动画基础
- NYOJ2括号配对问题
- Spiral Matrix II 解答
- Web版RSS阅读器(二)——使用dTree树形加载rss订阅分组列表
- Java并发编程:JDK中的阻塞队列
- ios在Xcode里关于图片的权限设置
- 201521123082 《Java程序设计》第13周学习总结
- pillow的用法
- MongoDB 常用语句
- 20175208 实验二 《Java面向对象程序设计》实验报告
- IIS + FastCGI+php(从5.2升级到5.3)
- zookeeper原理与安装
- 谷歌浏览器内核Cef js代码整理(一)