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

 //三角形
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. VS2012:升级Update2和Update3均告损坏,重装方法

    My steps (after backing up everything before deleting it): 1. Uninstalled VS2012 Pro from Windows 8 ...

  2. window.frames[]在Firefox下无法兼容的解决方式

    html代码段: <iframe id="fr" src="ProjectTree.aspx?IsFree=true&f=yes&IsCheckPr ...

  3. 将nosetests的echo结果保存到本地文件

    nose是很好用的python 测试框架. 但是一直很纠结如何将结果保存到本地.采用nosetests -h查看相关的options,找到一个xunit的东西,似乎可以实现功能. 测试结果: 可见,已 ...

  4. MySQL修改密码和忘记ROOT密码

    1.关闭数据库 脚本:[root@mysql etc]# service mysql stop 2.使用脚本: mysqld_safe --skip-grant-tables 启动数据库 使用/usr ...

  5. python monkey 猴子补丁技术编程,修改python json dumps方法。

    1.猴子补丁就是不改变原有模块的内容的前提下,给原有模块新增方法或者修改原有模块. 一个模块的函数,如果希望改变函数的功能,不改变函数名,通常是库模块,你不可能去修改三方库的源码的,实施起来不方便,而 ...

  6. [Algorithm] Beating the Binary Search algorithm – Interpolation Search, Galloping Search

    From: http://blog.jobbole.com/73517/ 二分检索是查找有序数组最简单然而最有效的算法之一.现在的问题是,更复杂的算法能不能做的更好?我们先看一下其他方法. 有些情况下 ...

  7. OC中Runtime浅析

    近期了解了一下OC的Runtime,真的是OC中非常强大的一个机制,看起来比較底层,但事实上能够有非常多活用的方式. 什么是Runtime 我们尽管是用Objective-C写的代码,事实上在运行过程 ...

  8. Linux环境下MySQL设置gbk编码

    1 编辑mysql配置文件 vi /etc/my.cnf 2 创建数据库 CREATE DATABASE `XXX` DEFAULT CHARACTER SET gbk COLLATE gbk_chi ...

  9. centos7安装python-3.5

    sudo yum install gcc wget https://www.python.org/ftp/python/3.5.0/Python-3.5.0.tgz sudo cp Python-.t ...

  10. curl 上传文件

    1)在 php 5.5.0 之前,如果使用 @+文件路径的文件上传文件,具体看这里:http://www.cnblogs.com/tujia/p/5938463.html 2)php 5.5.0 之后 ...