编程示例：在H5画布上绘制毕达哥拉斯树
编程示例：在H5画布上绘制毕达哥拉斯树
--------------------------绘制毕达哥拉斯的树形图案 04-25
function draw_tree()
{
draw_square([300,100],[400,100],1);
}
function map_world_2_screen(a_p)
{
return [a_p[0],600-a_p[1]];
}
function draw_triangle(a_p,b_p,leftorright)
{
var point =[];
var third_p=get_third_point_from_triangle(a_p,b_p,leftorright);
point.push(map_world_2_screen(a_p));
point.push(map_world_2_screen(b_p));
point.push(map_world_2_screen(third_p));
point.push(map_world_2_screen(a_p));
draw_polygonal_line(point);
var dis= get_distance(a_p,third_p);
if(dis>4)
{draw_square(a_p,third_p,1);//leftorright);
draw_square(b_p,third_p,-1);//leftorright*(-1));
}
}
function draw_square(a_p,b_p,leftorright)
{
var point =[];
var third_p=get_third_point_from_square(a_p,b_p,leftorright);
var fourth_p=get_fourth_point_from_square(a_p,b_p,leftorright);
point.push(map_world_2_screen(a_p));
point.push(map_world_2_screen(b_p));
point.push(map_world_2_screen(third_p));
point.push(map_world_2_screen(fourth_p));
point.push(map_world_2_screen(a_p));
draw_polygonal_line(point);
if (leftorright>0){
draw_triangle(fourth_p,third_p,leftorright);}
else {draw_triangle(third_p,fourth_p,leftorright);}
}
function get_cos_value(a_p,b_p,sin_value)
{
var x_diff=a_p[0]-b_p[0];
var y_diff=a_p[1]-b_p[1];
var v=Math.sqrt(1-sin_value*sin_value);
if(x_diff<=0) {v=v;}
else {v=v*(-1);}
return v;
}
function get_third_point_from_triangle(a_p,b_p,leftorright)
{
var dis=get_distance(a_p,b_p)*0.6;
var sin_v=get_sin_value(a_p,b_p);
var cos_v=get_cos_value(a_p,b_p,sin_v);
var sin_sum=0.6*sin_v+0.8*cos_v;
var cos_sum=cos_v*0.6-0.8*sin_v;
var ball_x=dis*cos_sum;
var ball_y=dis*sin_sum;
return [a_p[0]+ball_x,a_p[1]+ball_y];
}
function get_third_point_from_square(a_p,b_p,leftorright)
{
var dis=get_distance(a_p,b_p);
var sin_v=get_sin_value(a_p,b_p);
var cos_v=get_cos_value(a_p,b_p,sin_v);
var sin_sum=sin_v+cos_v*leftorright;
var cos_sum=cos_v-sin_v*leftorright;
var ball_x=dis*cos_sum;
var ball_y=dis*sin_sum;
return [a_p[0]+ball_x,a_p[1]+ball_y];
}
function get_fourth_point_from_square(a_p,b_p,leftorright)
{
var dis=get_distance(a_p,b_p);
var sin_v=get_sin_value(a_p,b_p);
var cos_v=get_cos_value(a_p,b_p,sin_v);
var sin_sum=cos_v*leftorright;
var cos_sum=sin_v*(-1)*leftorright;
var ball_x=dis*cos_sum;
var ball_y=dis*sin_sum;
return [a_p[0]+ball_x,a_p[1]+ball_y];
}
function get_sin_value(a_p,b_p)
{
var x_diff=a_p[0]-b_p[0];
var y_diff=a_p[1]-b_p[1];
if(x_diff==0) { if(y_diff<=0) return 1;else {return -1;}}
else if(y_diff==0) {return 0;}
else {
var ar=1.0/Math.sqrt(1+(x_diff*x_diff)/(y_diff*y_diff));
if(y_diff<=0) return ar;
else {return -ar;}
}
}
function get_distance(a_p,b_p)
{
var x_diff=a_p[0]-b_p[0];
var y_diff=a_p[1]-b_p[1];
var dis=Math.sqrt(x_diff*x_diff+y_diff*y_diff);
return Math.round(dis,0);
}
//----------------------end
绘制的结果如下：
编程示例：在H5画布上绘制毕达哥拉斯树相关推荐
- 如何运用html在画布上画画,如何使用js在画布上绘制图形
在画布上,首先使用JavaScript的HTML DOM方法查找元素,在使用getContext()方法创建绘图对象,最后使用HTML DOM Canvas 对象的属性和方法绘制图形. HTML5元素 ...
- CAD教程：画布上绘制一些不规则图形
大家在使用CAD过程中,有时可能需要在画布上绘制一些不规则图形,或者是自己设计一个签名,如果用直线或多线段命令操作比较麻烦,不仅画起来较混乱,还要不停的回车确定我们的坐标点,这时候大家可能会想CAD是 ...
- 逐帧绘制毕达哥拉斯树
逐帧绘制毕达哥拉斯树 最近有点闲,于是就整点活,做了个逐帧绘制的毕达哥拉斯树.有利于你们理解递龟和异步的机制(￣▽￣)/. 下面是代码: <html><body><can ...
- html 怎么在画布上绘制一个圆,javascript – 如何在画布上画一个圆圈？
我使用 javascript和画布绘制一个数学设计的尺度(用于测量扭矩,包括牛顿米和英尺磅).我已经用三角法来定位我的刻度,自然地用弧线绘制电弧线.问题来了,当他们需要排队,但有一些奇怪的失真.然后我 ...
- 用python画背景_如何在有背景的画布上绘制图像
我想用Tkinger做一个纸牌游戏.在设置一个表图像作为画布的背景.在 在桌子的背景上画卡片.这将通过单击按钮(此处未显示)来触发 问题是我不能在桌面背景上创建卡片图像.正确的方法是什么?我是否需要为 ...
- java 鼠标画矩形_用鼠标在画布上绘制Angular2绘制矩形
我是angular2和画布的新手,我正在尝试创建一个首先将图像绘制到画布上的组件,然后用户可以使用鼠标在该图像上绘制矩形(以点击和拖动方式) . 这是我到目前为止几乎按预期工作的 . @Compone ...
- html5画布画点,在HTML5画布上绘制一个点
6 个答案: 答案 0 :(得分:141) 如果您打算绘制大量像素,使用画布的图像数据进行像素绘制会更有效率. var canvas = document.getElementById("m ...
- html中圆角矩形怎么写,如何在HTML画布上绘制圆角矩形？
要在HTML中绘制矩形,请使用canvas元素.对于画布,请使用该rect()方法绘制矩形.但是,对于创建圆角矩形,使用该rect()方法将不起作用.我们将使用lineTo()andquadratic ...
- html插入循环图片,javascript – HTML5在带有for循环的画布上绘制图片？
所以,我想用 HTML5创建一个Minecraft网站主题.我在HTML5 / Javascript中有点摇摇欲坠(暂时没用过它),我需要一些帮助.我正在尝试计算一些可以放在屏幕上的16x16px瓷砖 ...
最新文章
- es6 Module语法
- android读取SDCard任意路径下的文件
- 详解基于朴素贝叶斯的情感分析及 Python 实现
- Oracle 执行计划
- java 翻转句子_Java编程-句子反转
- 高并发之服务降级和服务熔断____服务降级、熔断、限流的区别
- 缓存穿透-布隆过滤器
- 网络通信之通过get/post方式提交参数给web应用
- Ubuntu下RabbitMQ安装
- html 做王者荣耀
- rpc portmap rpcbind vxi11
- 真值表-Python实现
- ARM嵌入式系统的问题分析与总结
- 卡方检验结果表格中出现非常多个卡方值和P值的原理和实现步骤
- 电主轴故障分析及正确处理方法
- 360cdn能挡住cc攻击_人人用得起的CDN加速服务，可防御CC攻击
- （38）骨网格物体骼Actor
- 算力越大越牛逼？地平线与Mobileye等的共识是......
- 美国虚拟主机空间是什么以及具有哪些特点？
- 品牌与商家如何做电商直播运营的呢？