html画布用函数旋转,canvas rotate()画布的旋转详解
刚才仍是风和日丽的天,这没一会会就乌云密布了,雨呀,眼瞅就下来了呢,一场秋雨一场寒,感受懂得要穿棉袄了的节奏
10月1号以前,仍是T恤呢,10月放完国庆节和中秋节之后就开始毛衣、毛衫、毛外套了,这真的是8天过了一个季节呀~~~
大概北方的秋天都是这么快的吧
继续来看看canvas的rotate()方法
rotate()旋转当前的绘图。
语法:context.rotate(angle)
参数:angle旋转角度,以弧度计(n*Math.PI)
举例:假如想要旋转60度,能够context.rotate(Math.PI/3)进行表示;javascript
乡亲们注意啦?开会啦?
旋转的中心是在整个画布的左上角(0,0),旋转的正方向是顺时针,旋转的反方向是逆时针,
重点:canvas中的rotate方法是绕画布左上角(0,0)进行旋转的,并且会受到translate的影响css
实例效果开始:html
border:1px solid #000;
}
var ctx=canvas.getContext('2d');
ctx.rotate(Math.PI/6);//正方向旋转30度
ctx.fillRect(100,100,300,200);
显示效果:
java
逆方向旋转30度怎么写?web
border:1px solid #000;
}
var ctx=canvas.getContext('2d');
ctx.rotate(-Math.PI/6);
ctx.fillRect(100,100,300,200);
显示效果:
canvas
既然知道了旋转,那咱们来作一个好玩的,燥起来,燥起来…..
需求:作一个旋转的矩形,而且以矩形的中心为原点,围绕原点旋转svg
border:1px solid #000;
}
var ctx=canvas.getContext('2d');
//3.把旋转的矩形平移进画布
ctx.translate(300,300);
var timer=setInterval(function(){
//4.清除的点须要注意 ctx.clearRect(-151,-101,canvas.width,canvas.height);
//1.定义一个旋转的方法,肯定每次时间间隔中要旋转多少弧度
ctx.rotate(0.01*Math.PI);
//2.绘制一个矩形,由于需求要求矩形以中心为轴进行旋转,可是canvas中rotate只能以画布左上角为轴,进行旋转
//所以,只要使矩形的中心和画布的左上角重合就能够了(起点的横纵坐标为矩形宽高的一半)
ctx.strokeRect(-150,-100,300,200);
},5);
显示效果图:
函数
既然是持续旋转立刻想到的确定就是setInterval,每间隔5毫秒执行一次函数
在想到的就是用到canvas中的rotate()方法,让矩形旋转必定的角度
接下来遇到难点了,就是rotate旋转都是以画布的左上角为原点进行旋转的,那想让矩形围绕矩形的中心点旋转须要怎么办呢?
是否是能够把矩形的原点移到画布的原点,而后进行旋转呢?想一想的效果以下图:
那么这个问题解决了,接下来就是,人家要求矩形是在画布的内部,怎样让图像移到画布的内部呢?就用到canvas translate()方法进行平移,详情可点击连接ui
如今移入到了canvas的内部了,就万事大吉了?
no no no 可能噩梦才刚刚开始,又出现了个bug,效果如图:
spa
我去哪里是噩梦?感受这个画面还挺炫的有没有?
不过它终究不是客户想要的效果,问题来了,为何会发生重复叠加的效果?ok,没清除canvas中每次旋转的效果,因此致使图片的效果累加起来,那就须要用clearRect进行清除,那清除的其实坐标在哪里呢?这但是重点,就是矩形起点的横纵坐标+法线外面的1px虚影,因此clearRect(-151,-101,canvas.width,canvas.height);
大功告成!!!撒花撒花!!
html画布用函数旋转,canvas rotate()画布的旋转详解相关推荐
- html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习 课程介绍 一.本课程几乎包括所有canvas常用的api用法讲解 二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...
- python装饰器函数-Python函数装饰器常见使用方法实例详解
本文实例讲述了Python函数装饰器常见使用方法.分享给大家供大家参考,具体如下: 一.装饰器 首先,我们要了解到什么是开放封闭式原则? 软件一旦上线后,对修改源代码是封闭的,对功能的扩张是开放的,所 ...
- python跨函数调用变量_对python中不同模块(函数、类、变量)的调用详解
首先,先介绍两种引入模块的方法. 法一:将整个文件引入 import 文件名 文件名.函数名( ) / 文件名.类名 通过这个方法可以运行另外一个文件里的函数 法二:只引入某个文件中一个类/函数/变量 ...
- python中search和match的区别_Python中正则表达式match()、search()函数及match()和search()的区别详解...
match()和search()都是python中的正则匹配函数,那这两个函数有何区别呢? match()函数只检测RE是不是在string的开始位置匹配, search()会扫描整个string查找 ...
- python函数定义及调用-python函数声明和调用定义及原理详解
这篇文章主要介绍了python函数声明和调用定义及原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 函数是指代码片段,可以重复调用,比如我们前 ...
- python函数声明和调用定义及原理详解
这篇文章主要介绍了python函数声明和调用定义及原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 函数是指代码片段,可以重复调用,比如我们前 ...
- python函数中可变参数的传递方式_详解Python函数可变参数定义及其参数传递方式...
Python函数可变参数定义及其参数传递方式详解 python中 函数不定参数的定义形式如下 1. func(*args) 传入的参数为以元组形式存在args中,如: def func(*args): ...
- canvas rotate()画布的旋转详解
刚才还是风和日丽的天,这没一会会就乌云密布了,雨呀,眼瞅就下来了呢,一场秋雨一场寒,感觉懂得要穿棉袄了的节奏 10月1号之前,还是T恤呢,10月放完国庆节和中秋节以后就开始毛衣.毛衫.毛外套了,这真的 ...
- android 自定义 进度条 旋转,Android_Android ProgressBar进度条使用详解,ProgressBar进度条,分为旋转进 - phpStudy...
Android ProgressBar进度条使用详解 ProgressBar进度条,分为旋转进度条和水平进度条,进度条的样式根据需要自定义,之前一直不明白进度条如何在实际项目中使用,网上演示进度条的案 ...
最新文章
- Java面试之Java基础下册(含答案)
- 愚蠢的CNN,换个马甲就认不出猫!但,这病能治 | ICLR Oral
- php vbcrlf,我是这样打造自已的“菜刀”的,让一句话飞一会
- 20051008:看了AppleSeed,领悟到了一个道理:
- iOS 进阶 - RUNTIME 运行时
- 比较两个title是否相等(差点把我送走)
- html:(26):类选择器和id选择器
- jstl 获取 javascript 定义的变量_前端开发大牛完整总结出了JavaScript 难点 +最新web前端开发教程...
- 大数据学情分析_多分学情大数据分析
- php无嵌套遍历多维数组,不递归怎么遍历多维数组(维数不定)
- 如何在 Java 中正确使用 wait, notify 和 notifyAll?
- 记录java对象修改过的字段_Java垃圾回收器与内存回收策略
- mysql 交集_面试官:来说说MySQL的常见优化方案……
- macOS和iOS间的隔空接力功能
- 07、基于ADC0808/ADC0809的多通道电压采集程序设计
- 2022自编译最新稳定版newifi3固件
- ubantu桌面,compiz特效和配置
- 作为程序员,推荐5种编程语言!
- HDFS文件访问权限
- 2018 11.2 PION模拟赛