螺旋图形Linux,Canvas 螺旋线几何图形绘制
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var scol = 'hsla(75, 5%, 95%, 1)';
function ready() {
var c = document.getElementById("canvas");
var $ = c.getContext("2d");
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var graph = new Graph(c.width, c.height);
window.addEventListener('mousemove', function(e) {
graph.ms.x = e.pageX;
graph.ms.y = e.pageY;
}, false);
window.addEventListener('touchmove', function(e) {
graph.ms.x = e.touches[0].pageX;
graph.ms.y = e.touches[0].pageY;
}, false);
var draw = function() {
graph.figure();
graph.draw($);
};
run();
function run() {
window.requestAnimFrame(run);
draw();
}
}
function Graph(w, h) {
var spiro = this;
spiro.msdn = false;
spiro.ms = {
x: w / 2,
y: h / 2
};
var contC = 224;
var oc = contC / 12 + (contC * 10 / 12 * Math.random()) | 0;
var ic = oc / 12 + (oc * 10 / 12 * Math.random()) | 0;
var rat = contC / oc;
var cont = new Circle(w / 2, h / 2, contC, 0);
cont.strokeStyle = "hsla(75, 5%, 95%, 1)";
var outer = cont.i_circle(oc, 0);
var inner = outer.i_circle(ic, 0);
var loc = [];
var ang = 0;
var bAng = cont.ang;
spiro.figure = function() {
ang += 2.0;
var cAng = ang * Math.PI / 180 - bAng;
cont.set(cAng);
var oAng = -cAng * rat;
outer.set(oAng);
var p = inner.getPos();
loc.push(p);
};
spiro.draw = function($) {
$.clearRect(0, 0, w, h);
$.fillStyle = 'hsla(255,255%,2555%,1)';
$.shadowColor = 'hsla(0,0%,0%,.5)';
$.shaodwBlur = 10;
$.shadowOffsetX = 2;
$.shadowOffsetY = 2;
var ms = spiro.ms;
if (cont.graph(ms.x, ms.y)) {
$.lineWidth = 4.0;
cont.draw($);
outer.draw($);
inner.draw($);
}
$.strokeStyle = scol;
$.lineWidth = 2;
$.beginPath();
$.moveTo(loc[0].x, loc[0].y);
for (var i = 1; i < loc.length; i++) {
$.lineTo(loc[i].x, loc[i].y);
}
$.stroke();
};
}
function Circle(cx, cy, r, ang) {
var spiro = this;
spiro.parent = null;
spiro.children = null;
spiro.cx = cx;
spiro.cy = cy;
spiro.r = r;
spiro.strokeStyle = null;
spiro.fillStyle = 'hsla(255,255%,255%,.7)';
spiro.set = function(a) {
spiro.ang = a;
spiro.cos = Math.cos(spiro.ang);
spiro.sin = Math.sin(spiro.ang);
};
spiro.set(ang);
spiro.i_circle = function(ri, ai) {
var x = spiro.cos * (spiro.r - ri);
var y = spiro.sin * (spiro.r - ri);
var ci = new Circle(x, y, ri, ai);
spiro.appendChild(ci);
return ci;
};
spiro.appendChild = function(e) {
if (spiro.children === null) {
spiro.children = [];
}
e.parent = spiro;
spiro.children.push(e);
};
spiro.remove = function(e) {
var kids = spiro.children;
if (kids !== null) {
for (var i in kids) {
if (kids[i] == e) {
kids.splice(i, 1);
}
}
}
};
spiro.getPos = function() {
var x = spiro.cx;
var y = spiro.cy;
var e = spiro.parent;
while (e !== null) {
var xx = e.cx + e.cos * x - e.sin * y;
y = e.cy + e.sin * x + e.cos * y;
x = xx;
e = e.parent;
}
return {
x: x,
y: y
};
};
spiro.graph = function(x, y) {
var p = spiro.getPos();
return (p.x - x) * (p.x - x) + (p.y - y) * (p.y - y) <= spiro.r * spiro.r;
};
spiro.draw = function($) {
if (spiro.strokeStyle === null && spiro.fillStyle === null) {
return;
}
var p = spiro.getPos();
$.beginPath();
$.arc(p.x, p.y, spiro.r, 0, Math.PI * 2.0, true);
if (spiro.strokeStyle !== null) {
$.strokeStyle = spiro.strokeStyle;
$.stroke();
} else {
$.fillStyle = spiro.fillStyle;
$.fill();
}
};
}
ready();
document.getElementById('reset').onclick = ready;
window.addEventListener('resize', function() {
c.width = w = window.innerWidth;
c.height = h = window.innerHeight;
}, false);
螺旋图形Linux,Canvas 螺旋线几何图形绘制相关推荐
- 螺旋图形Linux,一个实例带你熟练使用UG中的螺旋线,新手必备!
原标题:一个实例带你熟练使用UG中的螺旋线,新手必备! 今天咱们来一个稍微难一点点的花纹缸体,要用到咱们UG中的螺旋线哦! 图形分析:该缸体主体为圆柱体,可以采用圆柱体和凸台完成,根据图形标注特点需要 ...
- html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- CAD制图的时候,怎样绘制CAD螺旋图形?
初学CAD绘图设计的小伙伴们,我们在开始接触CAD绘图的时候都需要先从简单的CAD几何图形开始练习,循序渐进.这样才能逐渐熟练地掌握好各种CAD图形的绘制,例如绘制矩形.圆形.螺旋形等.今天我就在这里 ...
- 【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )
文章目录 一.鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 1.保存当前鼠标指针指向的位置 2.根据鼠标指针指向的位置以及比例重新计算图片位置 二.绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩 ...
- 自定义控件之绘图篇(一):概述及基本几何图形绘制
转自:http://blog.csdn.net/harvic880925/article/details/38875149 相关文章: <Android自定义控件三部曲文章索引>:http ...
- canvas 圆角矩形填充_View绘制系列(9)Canvas八卦图绘制
Canvas八卦图绘制 前面我们已经学习了Path.quadTo(float x1, float y1, float x2, float y2)及Path.cubicTo(float x1, floa ...
- 计算机图形设计论文 真实图形生成技术的发展,绘制技术论文,关于计算机图形图像绘制技术的现状应用相关参考文献资料-免费论文范文...
导读:这是一篇与绘制技术论文范文相关的免费优秀学术论文范文资料,为你的论文写作提供参考. (四川建筑职业技术学院,德阳618000) (Sichuan College of Architectural ...
- [Canvas系列]Canvas简单线条绘制_02
在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在Canvas中也是如此. 在开始之前我们先拿出画布和画笔: 1 2 var cvs = document. getElementByI ...
- h5 Canvas矩形的绘制
h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API: fillRect(x, y, width, height):绘制一个填充的矩形 strokeRect(x, ...
最新文章
- 自然语言处理数据集免费资源开放(附学习资料)
- 关于脉冲信号发生器的一点心得
- tensorflow tf.py_func
- 新的起点,新的生活!加油!
- UA OPTI570 量子力学6 单个粒子的波函数空间
- C++ 系列:基础知识储备
- EntityFramework 启用迁移 Enable-Migrations 报异常 No context type was found in the assembly
- 分析现有 WPF / Windows Forms 程序能否顺利迁移到 .NET Core 3.0
- php最常用方法,php 常用方法
- html中css如何引用自定义字体 - 案例篇
- iOS7应用开发5、视图控制器View Controller及其生命周期
- 思科 GNS3 配置 NAT 端口映射
- HttpComponents HttpCore 4.3 Alpha1 发布
- vue里面实现百度地图 标记多点 地点连线
- 计算机考研对英语四六级有要求吗,2022考研指南|考研对英语四六级有要求吗?...
- 手游开发攻防——二、基础篇
- 安卓逆向 -- Xposed模块编写
- C语言编码黄金螺旋线,阿基米德螺旋线
- 弗朗西斯培根的四大假象
- 谨防网上骗子社会工程!
热门文章
- linux脚本转换exe,Ps1 To Exe(powershell脚本转换EXE工具) V3.0.6 官方版
- C++ dll的隐式与显式调用
- qtgl 鼠标平移 c++_罗技真爱粉的MX Master 3无线鼠标体验
- mysql多表查询语句_mysql查询语句 和 多表关联查询 以及 子查询
- js中的cookie使用和vue-cookie的使用
- BZOJ1045 HAOI2008糖果传递(贪心)
- 科研入门之在web of science
- 关于strassen矩阵乘法的矩阵大小不是2^k的形式时,时间复杂度是否还是比朴素算法好的看法...
- Java-日期 正则表达式
- 基于redis 内存数据库简单使用