绘制多圆

2016年5月24日12:12:26

绘制一定数目(num)颜色随机的小圆,围成一个大圆。根据num完全自动生成,且小圆自动均分大圆路径(num≥20)。

效果:

前置技能:(1).Canvas(2).勾股定理、余弦定理、斜率方程、象限、角度与弧度转换等数学知识

HTML:

<canvas id="canvas" width="900" height="680">您的浏览器太老,请使用新版谷歌或火狐浏览器访问!</canvas>
<script src="canvas_circle.js"></script>

JS:

/**
* Created by suwt on 2016/4/26.
* 注释部分为一条动态射线
*/
window.onload = function () {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
loadTeams(context);
};
var circle_x = 350, // 圆心坐标
circle_y = 350,
circle_r = 200, // 半径
team_num = 30, // 小圆数目
colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; //随机颜色组
//加载布局模拟图
function loadTeams(cxt) {
cxt.beginPath();
cxt.strokeStyle = 'green';
cxt.arc(circle_x, circle_y, circle_r, 0, 2 * Math.PI);
cxt.stroke();
cxt.closePath();
seating(cxt)
setInterval("seating(canvas.getContext('2d'))",1000);
}
//分配小圆座次
function seating(cxt) {
var angle = 360 / team_num; //角度
var team_x = 0, team_y = 0;
var team_r = team_num < 20 ? 30 : Math.sqrt(circle_r * circle_r * 2 * (1 - Math.cos(changeRadian(angle)))) / 2;
//余弦定理 计算小圆的最大半径 BC²=AB²+AC²-2×AB×AC×cosα 如果小圆数目小于20个,半径最大30(上限)
for (var i = 0; i < team_num; i < i++) {
team_x = circle_x + Math.sin(changeRadian(i * angle)) * circle_r; //角度转弧度
team_y = circle_y - Math.cos(changeRadian(i * angle)) * circle_r;
cxt.beginPath();
//cxt.strokeStyle = 'red';
cxt.arc(team_x, team_y, team_r, 0, 2 * Math.PI);
cxt.stroke();
//cxt.fillStyle = "rgb(0,102,153)";
cxt.fillStyle = colors[ Math.floor( Math.random()*colors.length ) ];
cxt.fill();
//cxt.closePath();
}
//x=358;
//y=358;
//drawLine(cxt,x,y);
//setInterval(function(){
// x=x+1;
// y=y+1;
// drawLine(cxt,x,y);
//},5);
}
//function drawLine(cxt,x,y) {
// console.log(x+"---"+y);
// //cxt.clearRect(0,0,1000,1000);
// cxt.beginPath();
// cxt.strokeStyle = "black";
// cxt.lineWidth = 2;
// cxt.moveTo(x, y);
// cxt.lineTo(x+1,y+1);
// cxt.stroke();
// cxt.closePath();
// //cxt.rotate((Math.PI/180)*15);
//} //角度转换为弧度
function changeRadian(angle) {
return Math.PI / 180 * angle;
}
 

canvas绘制一定数目的圆(均分)的更多相关文章

  1. HTML5 canvas绘制雪花飘落动画(需求分析、知识点、程序编写分布详解)

    看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难 ...

  2. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  3. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  4. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  5. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  6. 使用Canvas绘制图形的基本教程

    原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  7. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  8. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  9. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

随机推荐

  1. Memcached·Redis缓存的基本操作

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...

  2. Visual Studio 2017正式版发布全纪录

    又是一年发布季,微软借着Visual Studio品牌20周年之际,于美国太平洋时间2017年3月7日9点召开发布会议,宣布正式发布新一代开发利器Visual Studio 2017.同时发布的还有 ...

  3. TypeScript设计模式之策略、模板方法

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  4. Java数据结构之Map学习总结

    前言: 前面学习总结了List的使用及效率对比,今天总结学习一下键值映射关系Map,顺便学习一下Android中使用Map需要注意哪些,以及谷歌官方针对Android对Map做了哪些优化. 先了解下M ...

  5. 关于IE低版本兼容问题

    1,元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动: 解决方案:给需要宽度由内容撑开的元素加上浮动 css样式: <style> .box{ ...

  6. 大数据系列之Flume+HDFS

    本文将介绍Flume(Spooling Directory Source) + HDFS,关于Flume 中几种Source详见文章 http://www.cnblogs.com/cnmenglang ...

  7. hibernate从数据库中自动生成

    计应134(实验班) 李佳鸿 DB Brower配置 1.依次选择window-Open Perspective-MyEclipse Explorer

  8. php中数据库服务器连接类库文件的编写

    <!--数据库服务器连接类库文件的编写--> <?php class mysql{ //连接服务器.数据库以及执行Sql语句的类库 public $database; public ...

  9. TFS2017代码搜索功能

    当团队或者公司的研发中心的代码库扩展到了一定程度,在代码库中查找一些需要的代码会变的比较困难.比如敏捷模式下的项目小组希望能够找到并重用其他小组开发的一些基础性的功能代码,我们通常需要去找当事人去询问 ...

  10. Windows 10 IoT Serials 7 – 如何用树莓派制作家庭流媒体播放器

    Windows 10平台引入了AllJoyn开源软件框架,它提供了一组服务可以创建动态近端网络,让设备可以相互连接实现功能交互.目前,AllJoyn开源软件框架由AllSeen联盟负责管理.AllSe ...