html飞机翼布局,2.11 融会贯通：绘制喷气式飞机

admin 管理员组

文章数量: 887053

html飞机翼布局,2.11 融会贯通：绘制喷气式飞机

本节，我们将使用直线、曲线、图形、颜色、线性渐变、径向渐变，绘制一个矢量式的喷气式飞机，来把HTML5的画布API推到极限。

图2-12 绘制喷气式飞机

绘制步骤

按照以下步骤，绘制一个矢量式的喷气式飞机：

1. 定义2D画布上下文，并设置直线交汇点样式：

window.onload  = function(){

var canvas  = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var grd;

context.lineJoin  = "round";

2. 绘制右侧尾翼：

//右侧尾翼轮廓

context.beginPath();

context.moveTo(248,  60);  // 13

context.lineTo(262,  45);  // 12

context.lineTo(285,  56);  // 11

context.lineTo(284,  59);  // 10

context.lineTo(276,  91);  // 9

context.closePath();

context.fillStyle  = "#495AFE";

context.fill();

context.lineWidth  =  4;

context.stroke();

//右侧尾翼细节

context.beginPath();

context.moveTo(281,  54);  //  10

context.lineTo(273,  84);  //  9

context.closePath();

context.lineWidth  =  2;

context.stroke();

3. 绘制右翼：

//右翼轮廓

context.beginPath();

context.moveTo(425,  159);

context.lineTo(449,  91);  //  4

context.lineTo(447,  83);  //  5

context.lineTo(408,  67);  //  6

context.lineTo(343,  132);  //  7

context.fillStyle  = "#495AFE";

context.fill();

context.lineWidth  =  4;

context.stroke();

//右翼细节

context.beginPath();

context.moveTo(420,  158);

context.lineTo(447,  83);  //  4

context.lineWidth  =  2;

context.stroke();

context.beginPath();

context.moveTo(439,  102);

context.lineTo(395,  81);

context.lineWidth  =  2;

context.stroke();

4. 绘制机身和机尾的顶部：

//机身轮廓

context.beginPath();

context.moveTo(541,  300);  //  1

context.quadraticCurveTo(529,  252,  490,  228);  //  2

context.quadraticCurveTo(487,  160,  303,  123);  //  3

//机尾轮廓

context.lineTo(213,  20);  //  14

context.lineTo(207,  22);  //  15

context.bezierCurveTo(208,  164,  255,  207,  412,  271);  //  27

context.lineTo(427,  271);  //  28

context.quadraticCurveTo(470,  296,  541,  300);  //  1

context.closePath();

grd  = context.createLinearGradient(304,  246,  345,  155);

grd.addColorStop(0, "#000E91");  //深蓝色

grd.addColorStop(1, "#495AFE");  //浅蓝色

context.fillStyle  = grd;

context.fill();

context.lineWidth  =  4;

context.stroke();

//机尾细节

context.beginPath();

context.moveTo(297,  124);

context.lineTo(207,  22);

context.lineWidth  =  2;

context.stroke();

5. 绘制左侧尾翼：

//左侧尾翼轮廓

context.beginPath();

context.moveTo(303,  121);  //  8

context.lineTo(297,  125);  //  8

context.lineTo(255,  104);

context.lineWidth  =  2;

context.stroke();

context.beginPath();

context.moveTo(212,  80);

context.lineTo(140,  85);  //  18

context.lineTo(138,  91);  //  19

context.lineTo(156,  105);  //  20

context.lineTo(254,  104);

context.lineTo(254,  100);

context.lineWidth  =  4;

context.fillStyle  = "#495AFE";

context.fill();

context.stroke();

//左侧尾翼细节

context.beginPath();

context.moveTo(140,  86);  //  18

context.lineTo(156,  100);  //  20

context.lineTo(254,  100);

context.lineTo(209,  77);

context.lineWidth  =  2;

context.stroke();

6. 绘制左翼：

//左翼轮廓

context.beginPath();

context.moveTo(262,  166);  //  22

context.lineTo(98,  208);  //  23

context.lineTo(96,  215);  //  24

context.lineTo(136,  245);  //  25

context.lineTo(339,  218);

context.lineTo(339,  215);

context.closePath();

context.fillStyle  = "#495AFE";

context.fill();

context.lineWidth  =  4;

context.stroke();

//左翼细节

context.beginPath();

context.moveTo(98,  210);

context.lineTo(136,  240);  //  25

context.lineTo(339,  213);

context.lineWidth  =  2;

context.stroke();

context.beginPath();

context.moveTo(165,  235);

context.lineTo(123,  203);

context.lineWidth  =  2;

context.stroke();

7. 绘制侧面细节：

// 侧面细节

context.beginPath();

context.moveTo(427,  271);

context.lineTo(423,  221);

context.quadraticCurveTo(372,  175,  310,  155);

context.lineWidth  =  4;

context.stroke();

8. 绘制机头细节：

//机头细节

context.beginPath();

context.moveTo(475,  288);

context.quadraticCurveTo(476,  256,  509,  243);

context.quadraticCurveTo(533,  268,  541,  300);  //  1

context.quadraticCurveTo(501,  300,  475,  288);

grd  = context.createLinearGradient(491,  301,  530,  263);

grd.addColorStop(0, "#9D0000");  // dark red

grd.addColorStop(1, "#FF0000");  // light red

context.fillStyle  = grd;

context.fill();

context.lineWidth  =  4;

context.stroke();

context.beginPath();

context.moveTo(480,  293);

context.quadraticCurveTo(480,  256,  513,  246);

context.lineWidth  =  2;

context.stroke();

9. 绘制驾驶舱：

//驾驶舱细节

context.beginPath();

context.moveTo(442,  169);

context.quadraticCurveTo(419,  176,  415,  200);

context.quadraticCurveTo(483,  250,  490,  228);

context.quadraticCurveTo(480,  186,  439,  170);

context.lineWidth  =  4;

context.stroke();

grd  = context.createRadialGradient(473,  200,  20,  473,  200,  70);

grd.addColorStop(0, "#E1E7FF");  // 深灰色

grd.addColorStop(1, "#737784");  // 浅灰色

context.fillStyle  = grd;

context.fill();

context.beginPath();

context.moveTo(448,  173);

context.quadraticCurveTo(425,  176,  420,  204);

context.lineWidth  =  2;

context.stroke();

context.beginPath();

context.moveTo(470,  186);

context.quadraticCurveTo(445,  190,  440,  220);

context.lineWidth  =  2;

context.stroke();

10. 绘制进气口：

//进气口轮廓

context.beginPath();

context.moveTo(420,  265);

context.lineTo(416,  223);

context.bezierCurveTo(384,  224,  399,  270,  420,  265);

context.closePath();

context.fillStyle  = "#001975";

context.fill();

context.lineWidth  =  4;

context.stroke();

context.beginPath();

context.moveTo(420,  265);

context.lineTo(402,  253);

context.lineWidth  =  2;

context.stroke();

context.beginPath();

context.moveTo(404,  203);

context.bezierCurveTo(364,  204,  379,  265,  394,  263);

context.lineWidth  =  2;

context.stroke();

};

11. 在HTML文档的body部分嵌入canvas标签：

工作原理

本节，我们组合使用了直线、二次曲线、贝塞尔曲线、路径、图形、纯色填充、线性渐变、径向渐变。虽然HTML5的画布还不是十分成熟，但它确实提供了绘制伟大的绘画作品，包括矢量式的喷气式飞机，所需要的一切。

要在HTML5的画布中绘制喷气式飞机，可以从Adobe Photoshop或其它图像编辑器入手，先在图像编辑器中绘制出一个喷气式飞机，要求绘制区域跟画布尺寸完全相等，本例的画布尺寸为650 x 350像素。然后，通过鼠标光标，找到构成飞机形状的关键点，其方法是把鼠标光标放到每条线的终点，并记录这些点的x, y坐标。有了这些坐标点，我们用4px宽的线绘制飞机的主要轮廓，回头再用2px宽的线填充飞机的细节部分。

先绘制离观众最远的部分是一个良好实践，因为在画布上，后绘制的每一个图形都会覆盖先绘制的图形。看看前面的代码，你会看到，右翼最先被绘制，再是机身，再是左翼。这是因为右翼离观众最远，而左翼离观众最近。

当这些线条绘制完成，我们就可以使用纯色来填充该飞机，用线性渐变填充机身，用径向渐变填充驾驶舱，以便给飞机增加立体感。最后，为机头增加醒目的红色渐变，让它准备起飞并激发我们的想象力。

本文标签： html飞机翼布局 211 融会贯通绘制喷气式飞机