HTML5 Canvas 画纸飞机组件

    纸飞机模拟一个物体在规定设计轴线偏离方位。

   

 1 //三角形
 2 function DrawTriangle(canvas, A, B, C) {
 3     //画个三角形,“A、B、C”是顶点
 4     with (canvas) {
 5         moveTo(A[0], A[1]);
 6         lineTo(B[0], B[1]);
 7         lineTo(C[0], C[1]);
 8         lineTo(A[0], A[1]);
 9     }
10 }
11 
12 // 画纸飞机
13 //headx,heady 纸飞机头坐标
14 //footx,footy 纸飞机尾巴坐标
15 function DrawDarts(canvas, headx, heady, footx, footy) {
16     var c = document.getElementById(canvas);
17     var cxt = c.getContext("2d");
18 
19     //半径 R 
20     var R = 150;
21 
22     //转换头坐标
23     var headx1 = R + headx;
24     var heady1 = R - heady;
25     //转换尾坐标
26     var footx1 = R + footx;
27     var footy1 = R - footy;
28 
29     //左尾
30     var footxl = R + (footx - 50);
31     var footyl = R - footy;
32 
33     //右尾
34     var footxr = R + (footx + 50);
35     var footyr = R - footy;
36 
37     //上尾
38     var footxu = R + footx;
39     var footyu = R - (footy - 50);
40 
41     //下尾
42     var footxd = R + footx;
43     var footyd = R - (footy + 50);
44 
45 
46     //判断头x和尾x的大小
47     cxt.beginPath();
48     cxt.strokeStyle = "black";
49     cxt.fillStyle = "#6C8D9F";
50     var A = new Array(headx1, heady1);
51     var B = new Array(footx1, footy1);
52     //  alert(headx1);
53     //  alert(footx1);
54     if (parseInt(headx1) - parseInt(footx1) <= 0)
55         var C = new Array(footxr, footyr);
56     else
57         var C = new Array(footxl, footyl);
58     DrawTriangle(cxt, A, B, C);
59 
60     cxt.fill();
61     cxt.closePath();
62     cxt.stroke();
63 
64     //画头、上、下尾巴 形成的三角形
65     cxt.beginPath();
66     cxt.strokeStyle = "black";
67     cxt.fillStyle = "#6C8D9F";
68     var A1 = new Array(headx1, heady1);
69     var B1 = new Array(footxu, footyu);
70     var C1 = new Array(footxd, footyd);
71     DrawTriangle(cxt, A1, B1, C1);
72     cxt.fill();
73     cxt.closePath();
74     cxt.stroke();
75 
76     cxt.beginPath();
77     cxt.strokeStyle = "black";
78     cxt.fillStyle = "#6C8D9F";
79     var A2 = new Array(headx1, heady1);
80     var B2 = new Array(footx1, footy1);
81     if (parseInt(headx1) - parseInt(footx1) <= 0)
82         var C2 = new Array(footxl, footyl);
83     else
84         var C2 = new Array(footxr, footyr);
85     DrawTriangle(cxt, A2, B2, C2);
86     cxt.fill();
87     cxt.closePath();
88     cxt.stroke();
89 }

html 页面调用

<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML Canvas 画纸飞机</title>
<script type="text/javascript" src="Darts.js"></script>
</head>
<body><canvas id="can" width="300" height="300" style="border: 1px solid #00F">浏览器不支持HTML5!</canvas><script type="text/javascript" charset="utf-8">DrawDarts("can", -10, 10, 30, -30)</script>
</body>
</html>

预览效果图

效果图2:

 

    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/291527.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[tools]notepad++当前文件路径不是工作路径

Time:2015/04/09 描述&#xff1a; 在notepad中运行lua&#xff0c;工作路径不是当前文件的路径&#xff0c;而是notepad的安装目录 修改&#xff1a; 把差将中的NppExec --> Follow $(CURRENT_DIRECTORY)勾上即可 参考&#xff1a; [1]http://bbs.chinaunix.net/thread-407…

OPPO R9凭创新赢得2000万销量,成2016年热销手机

2016年的手机市场虽然新闻不断但是整体状况并没有以往那么好&#xff0c;各方数据显示&#xff0c;2016年全年全球智能型手机出货量仅有2.3%的微幅增长&#xff0c;虽然中国市场的全年出货量通同比增长6%&#xff0c;但是比往年也大有不如&#xff0c;手机市场已从增量市场进入…

windows7 nginx php mysql_windows7配置Nginx+php+mysql的详细教程

最近在学习php&#xff0c;想把自己的学习经历记录下来&#xff0c;并写一些经验&#xff0c;仅供参考交流。此文适合那些刚刚接触php&#xff0c;想要学习并想要自己搭建Nginxphpmysql环境的同学。当然&#xff0c;你也可以选择集成好的安装包&#xff0c;比如 wamp等&#xf…

基于C#的计时管理器

问题我们使用各种系统时候会遇到以下问题&#xff1a;12306上购买火车票如果15分钟内未完成支付则订单自动取消。会议场馆预定座位&#xff0c;如果10分钟内未完成支付则预定自动取消。在指定时间之后&#xff0c;我需要执行一项任务。我之前做的很多系统&#xff0c;往往都是定…

C语言之malloc和free总结

1、内存分配和函数介绍 内存分配:指在程序执行的过程空间中或者回收存储空间 ,内存分配分为静态内存分配和动态内存分配 ,要实现动态内存分配,就需要有执行这个操作的对象。C语言提供的两个标准库函数:malloc和free。 1)malloc函数 原型:void *malloc(size_t size)…

哈希表(hashtable)的javascript简单实现

javascript中没有像c#,java那样的哈希表(hashtable)的实现。在js中,object属性的实现就是hash表,因此只要在object上封装点方法,简单的使用obejct管理属性的方法就可以实现简单高效的hashtable。 首先简单的介绍关于属性的一些方法&#xff1a; 属性的枚举: for/in循环是遍历对…

HDU 2516 (Fabonacci Nim) 取石子游戏

这道题的结论就是&#xff0c;石子的个数为斐波那契数列某一项的时候&#xff0c;先手必败&#xff1b;否则&#xff0c;先手必胜。 结论很简单&#xff0c;但是证明却不是特别容易。找了好几篇博客&#xff0c;发现不一样的也就两篇&#xff0c;但是这两篇给的证明感觉证得不清…

access的ole对象换成mysql_ACCESS的Ole对象读取写入

Ole对象在Access中存储为二进制文件&#xff0c;读取的时候需要注意转换出的文件的编码格式1OleDbConnection OleConnnewOleDbConnection();2OleConn.ConnectionString"ProviderMicrosoft.Jet.OleDb.4.0;data sourceD:\WorkStation\Dialy_Sol\Dialy\Dialy.mdb";3OleD…

C++之delete常见错误总结

1、动态分配内存后释放了一次,再次释放 1)直接删除2次 int main() {int *a = new int(50);cout<<*a<<endl;delete a;delete a;return 0; } 2)另外一个指针指向分配的内存,然后把这个2个指针都删除 int* p1 = new int(50); int* p2 = p1; //p2和p1 现在指向同一…

ABP vNext微服务架构详细教程——分布式权限框架(上)

1简介ABP vNext框架本身提供了一套权限框架&#xff0c;其功能非常丰富&#xff0c;具体可参考官方文档&#xff1a;https://docs.abp.io/en/abp/latest/Authorization但是我们使用时会发现&#xff0c;对于正常的单体应用&#xff0c;ABP vNext框架提供的权限系统没有问题&…

前端每隔几秒发送一个请求

2019独角兽企业重金招聘Python工程师标准>>> <html><head><SCRIPT LANGUAGE"JavaScript"> var timer;//声明一个定时器 var count 0; function test() { //每隔500毫秒执行一次add()方法 timer window.setInterval("add()"…

Android之走手机流量让电脑能上网几种方法

1、通过“USB共享网络"来使电脑上网 1)我是vivo手机&#xff0c;把手机插上电脑,打开usb调试&#xff0c;然后正常连接电脑 2&#xff09;在“设置”里面打开“个人热点”里面的“通过usb共享网络”开关 3&#xff09;切换网络连接&#xff0c;对比之前的没插上手机之前没…

element 表单回显验证_关于vue el-form表单报错的问题

在写el-form表单的时候&#xff0c;遇到了蛮多问题&#xff0c;在这里记录一下。1.表单验证报错[Element Warn][Form]model is required for validate to work!初始代码如下&#xff1a;<!-- 表单部分 --> <el-formref"inputForm"size"mini"inlin…

Objective-C NSSetNSMutableSet以及CountedSet

NSSet说实话,对这个类的应用,还不知道到底什么时候会用到,先过一遍脑子吧,以后有需要用到的时候,不至于陌生! #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { autoreleasepool { //创建4个NSNumber对象 NSNumber *obj1 [NSNumber number…

IOZONE测试工具使用方法(转载)

IOZONE主要用来测试操作系统文件系统性能的测试工具&#xff0c;该工具所测试的范围主要有&#xff0c;write , Re-write, Read, Re-Read, Random Read, Random Write, Random Mix, Backwards Read, Record Rewrite, Strided Read, Fwrite, Frewrite, Fread, Freread, Mmap, As…

如何通过 C# 判断某个 IP 所属的地区?

咨询区 RC1140如何通过 C# 判断某个 IP 所属的地区&#xff1f;这样我就可以方便统计。回答区 Jaimes可以借助第三方API接口&#xff0c;参考网址&#xff1a;https://ipapi.co/8.8.8.8/country/ &#xff0c; C# 代码如下&#xff1a;using System; using System.Net; using S…

4月12日 webform基本控件

服务器基本控件&#xff1a; button: text属性 linkbutton:text属性&#xff0c;它是一个超链接模样的普通button hyperlink: navigateurl:链接地址&#xff0c;相当于<a>标签 imagebutton:imageurl:指定图片路径&#xff0c;这也是一个按钮&#xff0c;执行click事件 im…

C/C++之函数返回值为指针或者是引用时常见错误总结

1、说明 函数如果是指针或则引用的返回,一般全局变量、局部静态变量、局部动态分配内存的变量可以使用作为函数的返回值,局部变量不行,因为局部变量函数调用完会自动销毁内存,这个时候返回的指针或则引用就有问题了。 2、展示代码 #include <iostream> #include <…

我做了一个 Istio Workshop,这是第一讲介绍

我是 Jimmy Song[1]&#xff0c;Tetrate 布道师&#xff0c;云原生社区创始人。你可以能想到为什么在这个时候创建一个 Istio 教程&#xff0c;因为市面上已经林林总总有不少关于 Istio 的书籍和教程了&#xff0c;但是我们都知道 Istio 是一个新兴技术&#xff0c;发展十分迅速…

Swoole入门指南:PHP7安装Swoole详细教程(一)

好久未更新了&#xff0c;不是懒呃&#xff0c;是太忙啦&#xff01;终于偷得浮生几日闲。这一段时间准备为大家带来swoole的入门教程&#xff0c;感受一下php的nodeJs强悍之处。 所有的示例代码均放在了github上&#xff1a;learn-swoole 环境 这里不在使用apache做为web serv…