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

 //三角形

 function DrawTriangle(canvas, A, B, C) {

     //画个三角形,“A、B、C”是顶点

     with (canvas) {

         moveTo(A[0], A[1]);

         lineTo(B[0], B[1]);

         lineTo(C[0], C[1]);

         lineTo(A[0], A[1]);

     }

 }

 // 画纸飞机

 //headx,heady 纸飞机头坐标

 //footx,footy 纸飞机尾巴坐标

 function DrawDarts(canvas, headx, heady, footx, footy) {

     var c = document.getElementById(canvas);

     var cxt = c.getContext("2d");

     //半径 R

     var R = 150;

     //转换头坐标

     var headx1 = R + headx;

     var heady1 = R - heady;

     //转换尾坐标

     var footx1 = R + footx;

     var footy1 = R - footy;

     //左尾

     var footxl = R + (footx - 50);

     var footyl = R - footy;

     //右尾

     var footxr = R + (footx + 50);

     var footyr = R - footy;

     //上尾

     var footxu = R + footx;

     var footyu = R - (footy - 50);

     //下尾

     var footxd = R + footx;

     var footyd = R - (footy + 50);

     //判断头x和尾x的大小

     cxt.beginPath();

     cxt.strokeStyle = "black";

     cxt.fillStyle = "#6C8D9F";

     var A = new Array(headx1, heady1);

     var B = new Array(footx1, footy1);

     //  alert(headx1);

     //  alert(footx1);

     if (parseInt(headx1) - parseInt(footx1) <= 0)

         var C = new Array(footxr, footyr);

     else

         var C = new Array(footxl, footyl);

     DrawTriangle(cxt, A, B, C);

     cxt.fill();

     cxt.closePath();

     cxt.stroke();

     //画头、上、下尾巴 形成的三角形

     cxt.beginPath();

     cxt.strokeStyle = "black";

     cxt.fillStyle = "#6C8D9F";

     var A1 = new Array(headx1, heady1);

     var B1 = new Array(footxu, footyu);

     var C1 = new Array(footxd, footyd);

     DrawTriangle(cxt, A1, B1, C1);

     cxt.fill();

     cxt.closePath();

     cxt.stroke();

     cxt.beginPath();

     cxt.strokeStyle = "black";

     cxt.fillStyle = "#6C8D9F";

     var A2 = new Array(headx1, heady1);

     var B2 = new Array(footx1, footy1);

     if (parseInt(headx1) - parseInt(footx1) <= 0)

         var C2 = new Array(footxl, footyl);

     else

         var C2 = new Array(footxr, footyr);

     DrawTriangle(cxt, A2, B2, C2);

     cxt.fill();

     cxt.closePath();

     cxt.stroke();

 }

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：

HTML5 Canvas 画纸飞机组件的更多相关文章

  1. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...

  2. 基于 HTML5 Canvas 的拓扑组件开发

    在现在前端圈大行其道的 React 和 Vue 中,可复用的组件可能是他们大受欢迎的原因之一, 在 HT 的产品中也有组件的概念,不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去 ...

  3. 基于 HTML5 Canvas 的拓扑组件 ToolTip 应用

    前言 ToolTip 效果是网页制作中常见的使用特效.当用户将鼠标悬浮在某个控件上时,ToolTip 显示并向用户展示相应的提示信息:当鼠标离开时,ToolTip 隐藏.一般情况下,我们使用 Tool ...

  4. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...

  5. jTopo HTML5 Canvas 画图组件

    jTopo是什么? jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包. jTopo关注于数据的图形展示,它是面 ...

  6. HTML5 Canvas 画图组件 All In One

    HTML5 Canvas 画图组件 All In One Canvas SVG Canvas + SVG refs https://www.infoq.cn/article/1BVg9VDSmqyHv ...

  7. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  8. html5 Canvas API

    详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...

  9. HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)

    HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...

随机推荐

  1. vim 编辑器常用命令

    vi 常用命令行 1.vi 模式 a) 一般模式: vi 处理文件时,一进入该文件,就是一般模式了. b) 编辑模式:在一般模式下可以进行删除,复制,粘贴等操作,却无法进行编辑操作.等按下‘i,I,o ...

  2. PDF文件可以转换成txt文档吗

    PDF是一种便携式的文件格式,传送和阅读都非常方便,是Adobe公司开发的跨平台文件格式,它无论在哪种打印机上都可以保证精确的颜色和准确的打印效果.可是有点遗憾的是PDF格式一般不能在手机上打开,或者 ...

  3. DPSR随手笔记

    降质模型 MAP:

  4. C#调用Delphi的dll之详解

    C#调用Delphi接口方法,有两种解决办法: 一.将Delphi程序编译成一个COM组件,然后在C#里引用COM组件. 二.非托管调用Dephi的DLL文件. 这里我们主要讲解一下第二种方法,讲第二 ...

  5. 一道简单的把ArrayList中的正负数组分开并求得边界索引的题目

    给定一个List,里面存放的一组整数有正数和负数,要求把正数和负数分开,并得到正数和负数分割线索引(不要求排序,不能使用多层循环) 解答方法并不算太复杂,重点注意边界条件和极端条件(全是正或者全是负) ...

  6. centos下快速安装JDK

    Linux系统自带了jdk(当然,如果没有,可以忽略这个步骤),但还是1.4的老版本,所以需要先卸载,然后在安装1.6,卸载步骤如下: [root@localhost ~]# rpm -qa | gr ...

  7. JAVAWEB开发之Session的追踪创建和销毁、JSP具体解释（指令，标签，内置对象，动作即转发和包括）、JavaBean及内省技术以及EL表达式获取内容的使用

    Session的追踪技术 已知Session是利用cookie机制的server端技术.当client第一次訪问资源时 假设调用request.getSession() 就会在server端创建一个由 ...

  8. OO模式-Singleton

    讨论一: 既然仅仅有一个类?为什么非要用一个模式来定义?难道就不能用程序猿之间的约定又或者使用伟大的设计模式来完毕? 1)先来说说全局变量的优点,当定义一个全局变量时,不论什么一个函数或者一行代码都能 ...

  9. Mesos 入门教程

    Mesos提供了高效.跨分布式应用程序和框架的资源隔离和共享,支持Hadoop. MPI.Hypertable.Spark等. Mesos是Apache孵化器中的一个开源项目,使用ZooKeeper实 ...

  10. iOS NSURLSession VS NSURLConnection

    NSURLSession VS NSURLConnection NSURLSession可以看做是NSURLConnection的进化版,其对NSURLConnection的改进点有: * 根据每个S ...