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,一经查实,立即删除!

相关文章

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;往往都是定…

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…

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()"…

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…

我做了一个 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…

C/C++之#ifdef、#if、#if defined的区别

1、看代码 2、运行结果 3、分析 #fi&#xff1a;后面接的表达式&#xff0c;如果为1就编译包含里面的内容 #ifdef&#xff1a;后面接的是一个宏&#xff0c;只要定义这个宏就行 #if defined(x)&#xff1a;和#ifdef效果一样 #if !defined(x)&#xff1a;和#ifndef效果一样

.Net Core 读取文件时中文乱码问题的解决方法

背景今天在使用core web api上传txt文档的时候本来很顺利的&#xff0c;但是一测试发现读取的中文内容是乱码的&#xff0c;很是纳闷。出于经验&#xff0c;立马把代码的Encoding.Default改成 Encoding.uft8, 发现还是不行。后面索性把上传的文件另存为下&#xff0c;特地选择带…

关于使用indexedDB的本地存储(2)

我又回来了~这几天估计没喝茶&#xff0c;每天头都晕晕的&#xff0c;昨晚上和室友看了素鸡7&#xff0c;伤心啊&#xff0c;自己一直都喜欢这个系列&#xff0c;感觉童年真的是渐行渐远了…… 上一篇说到了哪些内容我这里罗列一下 建立和打开数据库、删除数据库、判断objectSt…

BCVP开发者社区2022专属周边第一弹

BCVP TeamBCVP开发者社区是博主老张的哲学发起&#xff0c;鼓励每个人都可参与的一个分享社区&#xff0c;目前已经有12个参与者&#xff0c;19个开源项目。欢迎加入BCVP&#xff0c;获取专属周边礼品&#xff08;文末有介绍&#xff09;。官方博客还在筹建中&#xff0c;预计2…

C++之类模板最简单的使用

1、说明类模板 1) 声明类模板时要增加一行 template <class 类型参数名> template意思是“模板”,是声明类模板时必须写的关键字。在template后面的尖括号内的内容为模板的参数表列,关键字class表示其后面的是类型参数 2、写代码理解 3、运行结果 4、总结 上…

mysql 5.5主从同步_MySQL5.5+配置主从同步并结合ThinkPHP5设置分布式数据库

This browser does not support music or audio playback. Please play it in WeChat or another browser.前言&#xff1a;本文章是在同处局域网内的两台windows电脑&#xff0c;且MySQL是5.5以上版本下进行的一主多从同步配置&#xff0c;并且使用的是集成环境工具PHPStudy为…

C# 10的新特性

点击上方蓝字关注我们&#xff08;本文阅读所需15分钟&#xff09;我们很高兴地宣布 C# 10 作为 .NET 6 和 Visual Studio 2022的一部分已经发布了。在这篇文章中&#xff0c;我们将介绍 C# 10 的许多新功能&#xff0c;这些功能使您的代码更漂亮、更具表现力、更快。阅读 Visu…

C++编译出现binding ‘const string {aka const std::__cxx11::basic_string<char>}’ to reference of type ‘std

编译异常如下&#xff1a; 解决办法&#xff1a; 我的函数是这样的 string &larger(const string &s1, const string &s2){return s1.size() > s2.size()? s1 : s2; }改成这样就行了 const string &larger(const string &s1, const string &s2){r…

POJ 3181 Dollar Dayz DP

f[i][j]f[i-j][j]f[i][j-1]&#xff0c;结果很大需要高精度。 //#pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #include<cstring> #include<cstdlib> #include<algorithm> #include<iostream> #include…

.NET再出发!20岁生日快乐

.NET 20周年纪念2022年是.NET20周年纪念&#xff0c;一个技术能经历20个年头&#xff0c;也说明了它的成功。想起和 .NET刚接触的时候&#xff0c;我还是一个大一的学生&#xff0c;现在也已经步入中年。作为一名80后开发者&#xff0c;我相信很多同龄人和我一样经历了中国甚至…