Canvas 同心圆旋转示例解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <canvas id='cvs' width='800' height='800' style='border:1px dotted blue'></canvas> <script>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d'); ctx.moveTo(0,400);
ctx.lineTo(800,400);
ctx.stroke(); ctx.moveTo(400,0);
ctx.lineTo(400,800);
ctx.stroke(); ctx.moveTo(400,400);
// ctx.close();
ctx.arc(400,400,20,0,2*Math.PI);
ctx.stroke(); ctx.arc(400,400,200,0,2*Math.PI);
ctx.stroke(); var deg = 0;// 角度
var rad = (deg/360)*2*Math.PI;// 角度
var R = 200; // 大圆半径
var r = 20; // 小圆半径
var a = 400; // 中心圆心
var b = 400; // 中心圆心 for(var i = 0; i < 360 / 30; i++)
{
deg = 0+30*i; // 30为小圆相对于大圆偏移的角度
rad = (deg/360)*2*Math.PI;// 角度
y = a+Math.cos(rad)*R; // 当前时刻的小圆坐标y
x = b+Math.sin(rad)*R; // 当前时刻的小圆坐标x
ctx.moveTo(x,y); // 移动到小圆圆心
ctx.beginPath(); // 开始记录路径
ctx.arc(x,y,r,0,2*Math.PI); // 绘制小圆
ctx.closePath(); // 结束记录路径 提笔
ctx.stroke(); // 开始绘制保存路径 ctx.beginPath(); // 开始记录路径
ctx.moveTo(x,y); // 移动到当前小圆圆心
ctx.lineTo(a,b); // 画线到中心圆心 辐射线
ctx.closePath(); // 结束记录路径 提笔
ctx.stroke(); // 开始绘制保存路径 if(i == 1){
ctx.strokeStyle = 'red'; ctx.beginPath(); // 开始记录路径
ctx.moveTo(x,y); // 移动到当前小圆圆心
ctx.lineTo(a,y); // 画垂线
ctx.lineTo(a,b); // 画横坐标
ctx.closePath(); // 结束记录路径 提笔
ctx.stroke(); // 开始绘制保存路径 ctx.beginPath(); // 开始记录路径
ctx.moveTo(x,y); // 移动到当前小圆圆心
ctx.lineTo(x,b); // 画垂线
ctx.lineTo(a,b); // 画纵坐标
ctx.closePath(); // 结束记录路径 提笔
ctx.stroke(); // 开始绘制保存路径 ctx.strokeStyle = 'green';
ctx.beginPath();
ctx.moveTo(a,b);
ctx.arc(a,b,2*r,2*rad,3*rad);
ctx.closePath();
ctx.stroke(); ctx.font = '30px Arial';
ctx.fillText('A',a+5,b+r+50); ctx.font = '20px Arial';
ctx.fillText('R*sin(A)',(x-90),y-10); ctx.font = '20px Arial';
ctx.fillText('R*cos(A)',(x-10),y-50); ctx.strokeStyle = 'black';
}
} </script> </body>
</html>
Canvas 同心圆旋转示例解析的更多相关文章
- canvas基础动画示例
canvas基础动画示例 本文主要用最简单的例子,展示canvas动画效果是如何实现的 动画效果,是一个球绕着一点旋转 const canvas = document.getElementById(' ...
- xml scheme 示例解析
第一个示例解析 第二个示例解析
- Html5 Canvas动画旋转的小方块；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- FAT32文件格式示例解析
1.前言 本文主要以一个示例来分析FAT32文件系统的格式,对FAT32文件系统的各个区域详细分析. 2.FAT32文件系统典型分区 3.FAT32文件系统示例 按如下步骤在ubuntu下创建FAT3 ...
- canvas高级动画示例
canvas高级动画示例 演示地址 https://qzruncode.github.io/example/index.html <!DOCTYPE html> <html lang ...
- PHP 使用header函数设置HTTP头的示例解析 表头
PHP 使用header函数设置HTTP头的示例解析 表头 //定义编码 header( 'Content-Type:text/html;charset=utf-8 '); //Atom header ...
- 【腾讯Bugly干货分享】WebVR如此近-three.js的WebVR示例解析
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57c7ff1689a6c9121b1adb16 作者:苏晏烨 关于WebVR 最 ...
- 『Python Kivy』官方乒乓球游戏示例解析
本篇文章用于对Kivy框架官方所给出的一个「乒乓球」小游戏的源码进行简单地解析.我会尽可能的将方方面面的内容都说清楚.在文章的最下方为官方所给出的这个小游戏的教程以及游戏源码. 由于篇幅所限,本文只简 ...
- Android 图表绘制 achartengine 示例解析
一. AChartEngine 简介 1. 项目地址 AChartEngine 简介 : AChartEngine 是 Android 平台的图表开发库, 能绘制 折线图, 饼图, 气泡图, 柱状图, ...
随机推荐
- servletConfig的应用
在Servlet的配置文件中,可以使用一个或多个<init-param>标签为servlet配置一些初始化参数. 当servlet配置了初始化参数后,web容器在创建servlet实例对象 ...
- DapperExtensions 使用教程
最近搭建一个框架,使用dapper来做数据库访问,数据是sql server2012,支持多个数据库.事务.orm.ado.net原生操作方式,非常方便. 使用dapper的原因网上有很多文章说明,这 ...
- OSG相机与视图
转自:http://blog.csdn.net/wang15061955806/article/details/51603083 相机与视图 osg::Camera类用来管理OSG中的模型—— ...
- Ajax之XMLHttpRequest
XMLHttpRequest对象 XMLHttpRequest 提供客户端同http服务器通讯的协议 一:创建 IE : http_request = new ActiveXObject(" ...
- jQuery Mobile的使用方法
安装: <link rel="stylesheet" href="下载到本地的文件目录.min.css" media="screen" ...
- 常见的MIME
"css": "text/css", "gif": "image/gif", "html": &qu ...
- APUE（5）---标准I/O库 (2)
六.读和写流 一旦打开了流,则可在3种不同类型的非格式化I/O中进行选择,对其进行读.写操作:1)每次一个字符的I/O,一次读或写一个字符,如果刘时代缓冲的,则标准I/O函数处理所有缓冲:2)每次一行 ...
- centos 7 Hadoop2.7.4完全分布式搭建(一)
(一)系统准备与安装 1.准备下载centos7 (百度自行下载)可以到开源镜像站下载,速度比较快,比如清华的或者阿里的 在vmware上安装 这里我用的是vmware12 打开Vmware 选择文件 ...
- delphi Table切换控件顺序问题
delphi Table切换控件顺序问题 Tagorder的值就是确定Table键切换顺序的 以上做法只能解决同一类型的多个控件(如Edit1,edit2....)显示顺序问题 假如有不同类型的控件如 ...
- Mybatis 拦截器报错org.apache.ibatis.executor.statement.StatementHandler.prepare(java.sql.Connection)
出现此错误的原因是MyBatis 3.4.0 之后,StatementHandler的prepare方法做了修改,如下: 在args = { Connection.class }中添加第二个参数,即 ...