HTML5 Canvas 画纸飞机组件
生活随笔
收集整理的這篇文章主要介紹了
HTML5 Canvas 画纸飞机组件
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
? ? 紙飛機(jī)模擬一個(gè)物體在規(guī)定設(shè)計(jì)軸線偏離方位。
? ?
1 //三角形 2 function DrawTriangle(canvas, A, B, C) { 3 //畫(huà)個(gè)三角形,“A、B、C”是頂點(diǎn) 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 // 畫(huà)紙飛機(jī) 13 //headx,heady 紙飛機(jī)頭坐標(biāo) 14 //footx,footy 紙飛機(jī)尾巴坐標(biāo) 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 //轉(zhuǎn)換頭坐標(biāo) 23 var headx1 = R + headx; 24 var heady1 = R - heady; 25 //轉(zhuǎn)換尾坐標(biāo) 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 //畫(huà)頭、上、下尾巴 形成的三角形 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 頁(yè)面調(diào)用
<!DOCTYPE HTML> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML Canvas 畫(huà)紙飛機(jī)</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>預(yù)覽效果圖
效果圖2：
?
? ??
總結(jié)
以上是生活随笔為你收集整理的HTML5 Canvas 画纸飞机组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： C++ 面向对象（二）—— 操作符重载
- 下一篇： 2017年html5行业报告,云适配发布