var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d') var angle = 0 function move() {
context.clearRect(0,0,canvas.width,canvas.height) context.save()
context.beginPath()
context.lineWidth = 0.5
context.strokeStyle = 'red'
context.arc(canvas.width / 2, canvas.height / 2, 200, 0, Math.PI*2, false)
context.stroke()
context.restore() context.save()
context.beginPath()
context.fillStyle = 'green'
context.strokeStyle = 'green'
context.arc(canvas.width / 2 + Math.cos(angle) * 200, canvas.height / 2 + Math.sin(angle) * 200, 5, 0, Math.PI*2, false)
angle += Math.PI * 2 / 360
context.stroke()
context.fill()
context.restore() window.requestAnimationFrame(move)
} window.requestAnimationFrame(move)

-_-#【Canvas】圆弧运动的更多相关文章

  1. html canvas 圆弧

    contxt.arc(x, y , r, 0 , 弧 1.5*Math.PI PI要注意大小写 , 顺时针=false 逆时针 true) 例如  context.arc(300, 300, 200, ...

  2. canvas制作运动的小球

    <!DOCTYPE html> <head> <title>canvas</title> <style> .canvas{ border: ...

  3. 【探索之路】机器人篇(5)-Gazebo物理仿真环境搭建_让机器人运动起来

    如果完成了前两步,那么其实我们已经可以去连接我们的现实中的机器人了. 但是,做机器人所需要的材料还没有到,所以我们这里先在电脑平台上仿真一下.这里我们用到的就算gazebo物理仿真环境,他能很好的和R ...

  4. 前端笔记之Canvas

    一.Canvas基本使用 Canvas是HTML5的画布,Canvas算是“不务正业”的面向对象大总结,将面向对象玩极致. 算法为王!就是说canvas你不会,但是算法好,不怕写业务,不怕代码量,只要 ...

  5. HTML5 canvas入门

    HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...

  6. js封装成插件-------Canvas统计图插件编写

    之前就说过,我想写一个canvas画统计图的插件,现在写好了 先说下实现的功能吧: 1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图 2.可以选择画折现图还是柱形统计图,或者两者都实现 3 ...

  7. uniapp中用canvas实现小球碰撞的小动画

    uniapp 我就不想喷了,踩了很多坑,把代码贡献出来让大家少踩些坑. 实现的功能: 生成n个球在canvas中运动,相互碰撞后会反弹,反弹后的速度计算我研究过了,可以参考代码直接用 防止球出边框 防 ...

  8. 移动端图表插件jChart.js的修改

    bug1: 折线图,设置datasetGesture : true时,Y轴的刻度值居然会变.会变也就算了,居然没地方设置不能变. bug2: 折线图,设置tap.point事件,和datasetGes ...

  9. 数字积分法DDA(DDA(Digital Differential Analyzer)

    数字积分法DDA(DDA(Digital Differential Analyzer)    数字积分法又称数字微分分析法DDA(Digital differential Analyzer),是在数字 ...

随机推荐

  1. 第六篇:R语言数据可视化之数据分布图(直方图、密度曲线、箱线图、等高线、2D密度图)

    数据分布图简介 中医上讲看病四诊法为:望闻问切.而数据分析师分析数据的过程也有点相似,我们需要望:看看数据长什么样:闻:仔细分析数据是否合理:问:针对前两步工作搜集到的问题与业务方交流:切:结合业务方 ...

  2. IDL实现主成分变化(PCA)

    IDL只能通过调用envi的二次接口做图像的变换,但是对于普通的数据没有提供函数.根据主成分变换的原理,用IDL写出来了,这样就不用每次再去用matlab的princomp去做了.主成分变化的基本过程 ...

  3. COGS 908 校园网

    /* Tarjan缩点之后 强联通分量建图 统计每个强联通分量的出入度 第一问就是入度为0的 强联通分量的个数 第二问 为了高效的使每个强联通分量都有出入度 要把出度为零的强联通分量连到入度为零的点上 ...

  4. 关于asp.net程序连接不了ORACLE数据库而PL/SQL可以连接的问题

    今天在发布ASP.NET WEB网站时发现程序连接不了数据 报“ORA-12154: TNS: 无法解析指定的连接标识符”的错误,但PL/SQL连接又没有问题.真莫名其秒.在百度找了好多相关的问题.都 ...

  5. git针对Android Studio的使用

    1.将文件放到项目根目录下 .gitignore 文件内容: *.iml.gradle/local.properties/.idea/workspace.xml/.idea/libraries.DS_ ...

  6. PT与PX,em(%)区别

    字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:pt就是point,是印刷行业常用单位,等于1/72英寸. ...

  7. Asp.net 导航条【1】

    PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...

  8. PHP json的插入和解析在数据库中的操作

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. PHP中往数据库中存储json数据在项目开发中也经常遇到,下面我就 ...

  9. VBox UUID already exists 问题处理

    问题说明: 在win7系统下使用vbox时,有时候需要多台相同操作系统和开发环境的虚拟电脑时,如果重复安装,会比较麻烦.那么可以在vbox中创建一个新的虚拟电脑B,但不创建虚拟硬盘,然后拷贝虚拟电脑A ...

  10. sql 汉字转首字母拼音

    从网络上收刮了一些,以备后用 create function fun_getPY(@str nvarchar()) returns nvarchar() as begin declare @word ...