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：

HTML5 Canvas 画纸飞机组件相关推荐

HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例
2019独角兽企业重金招聘Python工程师标准>>> HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 ...
前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例 1
HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...
html前端课讲项目特效,前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例
HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...
html打飞机游戏代码,利用HTML5 Canvas实现打飞机游戏
这篇文章主要介绍了利用HTML5 Canvas制作一个简单的打飞机游戏,作者也给出了相关的Javascript代码,需要的朋友可以参考下之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和 ...
html飞机动画,html5 canvas纸飞机跟随鼠标飞行动画
这是一款效果很酷的html5 canvas纸飞机跟随鼠标飞行动画.插件中使用了paper.js来构建场景中的各种元素. HTML html结构只需要一个canvas,并给它一个id triangle- ...
html滑动直播,HTML5 canvas实现的静态循环滚动播放弹幕
本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕,分享给大家,具体如下: 使用方法和API 语法如下: canvasBarrage(canvas, data); 其中: canvas ...
基于HTML5 Canvas 实现弹出框
2019独角兽企业重金招聘Python工程师标准>>> 用户鼠标移入时,有弹出框出现,这样的需求很常见.这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图 ...
html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画
jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件.该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非 ...

HTML5 Canvas 画纸飞机组件

HTML5 Canvas 画纸飞机组件相关推荐

最新文章

热门文章