使用canvas rotate实现一个旋转的矩形,并且以矩形的中心为原点,围绕原点旋转:

<canvas id="canvas" width="800" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.translate(400,200);
setInterval(function(){
ctx.clearRect(-154,-104,canvas.width,canvas.height); // 清空矩形以及矩形的边框产生的效果
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = '#cccccc';
ctx.rotate(0.01 * Math.PI); // 旋转方法
ctx.rect(-150,-100,300,200); // 画300*200的矩形,并把矩形的中心点跟画布原点重合
ctx.stroke();
},5);
</script>

当然也可以使用strokeRect来实现,代码如下:

<canvas id="canvas" width="800" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.translate(400,200);
setInterval(function(){
ctx.clearRect(-154,-104,canvas.width,canvas.height); // 清空矩形以及矩形的边框产生的效果
ctx.lineWidth = "4";
ctx.strokeStyle = '#cccccc';
ctx.rotate(0.01 * Math.PI); // 旋转方法
ctx.strokeRect(-150,-100,300,200); // 画300*200的矩形,并把矩形的中心点跟画布原点重合
},5);
</script>

从以上代码可以看出,canvas的rect()和strokeRect()达到的效果是一样的,只是:rect()只是创建矩形,但是没有在画布上绘画,需要通过stroke()和fill()方法在画布上实际的绘画;而strokeRect()方法实际上会在画布上绘制矩形,该方法绘制矩形默认的笔触颜色为黑色,可以通过strokeStyle来修改填充颜色。

参考地址:

【效果】使用canvas rotate实现一个旋转的矩形的更多相关文章

  1. Android canvas rotate():平移旋转坐标系至任意原点任意角度-------附:android反三角函数小结

    自然状态下,坐标系以屏幕左上角为原点,向右是x正轴,向下是y正轴.现在要使坐标系的原点平移至任一点O(x,y),且旋转a角度,如何实现? 交待下我的问题背景,已知屏幕上有两点p1和p2,构成直线l.我 ...

  2. SceneKit做一个旋转的地球效果

    SceneKit可以用寥寥几行帮你完成很多OpenGL复杂的3D设置代码,下面本猫就带大家完成一个旋转的3D地球的场景. 首先需要地球表面图片,将其导入到Xcode中: 我们用SceneKit内置的几 ...

  3. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  4. canvas 图片拖拽旋转之一——坐标转换translate

    引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...

  5. Android开发之Canvas rotate方法释疑

    Canvas的rotate()函数本应该是很简单的一个函数,但是由于api手册言之不详,使用中难免有吃不准的地方.下面所记录的几点,都是我在使用中所迷惑过的问题,特此记录. 1,坐标原点在哪里? 如果 ...

  6. canvas实现跟随鼠标旋转的箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  7. canvas 动态飞速旋转的矩形

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. HTML5 Canvas 小例子 伸缩旋转方块

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体

    原文:WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体 运行结果: 事实上很简单,定义好一个正方体,处理好纹理.关于MeshGeometry3D的正确定义和纹理这里就不多讲 ...

  10. Directx11学习笔记【十二】 画一个旋转的彩色立方体

    上一次我们学习了如何画一个2D三角形,现在让我们进一步学习如何画一个旋转的彩色立方体吧. 具体流程同画三角形类似,因此不再给出完整代码了,不同的部分会再说明. 由于我们要画彩色的立方体,所以顶点结构体 ...

随机推荐

  1. saltStack自动化工具

    目录 SaltStack自动化工具 核心概念 1. Master 和 Minion 2. State 3. Pillar 4. Grains 5. Modules 6. Runner 7. React ...

  2. 疑难杂症(已解决) | 为什么出现python中tkinter创建界面需要一闪而过才进入主窗口?

    一.具体问题 如图所示,我编写了一个主窗口的程序(如下所示,有兴趣的可以自己复制后运行),发现需要先进入第一个窗口再进入主界面,这不符合逻辑. 代码区域(完整代码): from tkinter imp ...

  3. Mac下浏览器跨域配置方法

    open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/hooli ...

  4. Docker Engine在Centos下的安装

    实践环境 Centos7.8 先决条件 CentOS 7.8. 必须开启 centos-extrasyum仓库源.默认是开启的,如果关闭了,需要重新开启,如下 编辑 /etc/yum.repos.d/ ...

  5. java引入es使用

    引入依赖 <dependency> <groupId>org.elasticsearch.client</groupId> <artifactId>el ...

  6. (一)Vue 3 项目搭建

    确保已安装 16.0 或更高版本的 Node.js,然后在命令行中运行以下命令: npm init vue@latest 这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工 ...

  7. 【BIOS】关于启用快速启动之后进不了BIOS的问题

    这是我2013年的东芝SateLite M800的BIOS 作死开了快速启动 然后开启就跳过BIOS了 找贴吧看到的方法,先关机,然后按住访问BIOS的按键不要放 再启动,就会进BIOS了[老哥真牛]

  8. 【Spring-Security】Re05 权限控制及403处理

    一.访问控制方法及控制项: 上述配置中的URL后面都离不开的一个访问控制抉择: 1.全部允许 PermiAll 2.全部拒绝 DenyAll 3.允许匿名访问 Anonymous 也就是普通访问者 4 ...

  9. 全网最适合入门的面向对象编程教程:30 Python的内置数据类型-object根类

    全网最适合入门的面向对象编程教程:30 Python 的内置数据类型-object 根类 摘要: 在 Python 中,所有的类都直接或间接继承自一个根类,这个根类是Object.Object类是 P ...

  10. 【摘录】人形机器人和自动驾驶技术 —— 3D机器视觉技术

    以下内容引自: https://www.eda365.com/forum.php?mod=viewthread&tid=744288 3D机器视觉技术分为两个部分,即3D重构技术和3D数据分析 ...