html5canvas绘图-多边形的绘制
现在，我们已经将CANVAS绘图环境对象所⽀持的全部基本图形都讲完了。它们包括：线段、矩形、圆弧、圆形以及贝塞尔曲线。但是，我们肯定需要在canvas之中绘制除此之外的其他图形，⽐⽅说，三⾓形、六边形和⼋边形。在本节中，你将会学到如下图所⽰的应⽤程序，对任意对变形进⾏描边及填充。
使⽤moveTo()与lineTo（）⽅法，再结合⼀些简单的三⾓函数，就可以绘制出任意边数的多边形。
html代码：
1<html>
2<head>
3<title>Drawing Polygons</title>
4
5<style>
6      body {
7        background: #eeeeee;
8      }
9
10      #controls {
11        position: absolute;
12        left: 25px;
13        top: 25px;
14      }
15
16      #canvas {
17        background: #ffffff;
18        cursor: pointer;
19        margin-left: 10px;
20        margin-top: 10px;
21        -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
22        -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
23        box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
24      }
25</style>
26</head>
27
28<body>
29<canvas id='canvas' width='850' height='600'>
30          Canvas not supported
31</canvas>
32
33<div id='controls'>
34        Stroke color: <select id='strokeStyleSelect'>
35<option value='red'>red</option>
36<option value='green'>green</option>
37<option value='blue'>blue</option>
38<option value='orange'>orange</option>
39<option value='cornflowerblue' selected>cornflowerblue</option>
40<option value='goldenrod'>goldenrod</option>
41<option value='navy'>navy</option>
42<option value='purple'>purple</option>
43</select>
44
45        Fill color: <select id='fillStyleSelect'>
46<option value='rgba(255,0,0,0.5)'>semi-transparent red</option>
47<option value='green'>green</option>
48<option value='rgba(0,0,255,0.5)'>semi-transparent blue</option>
49<option value='orange'>orange</option>
50<option value='rgba(100,140,230,0.5)'>semi-transparent cornflowerblue</option>
51<option value='goldenrod' selected>goldenrod</option>
52<option value='navy'>navy</option>
53<option value='purple'>purple</option>
54</select>
55
56        Sides: <select id='sidesSelect'>
57<option value=4 select>4</option>
58<option value=6>6</option>
59<option value=8>8</option>
60<option value=10>10</option>
61<option value=12>12</option>
62<option value=20>20</option>
63</select>
64
65        Start angle: <select id='startAngleSelect'>
66<option value=0 select>0</option>
67<option value=22.5>22.5</option>
68<option value=45>45</option>
69<option value=67.5>67.5</option>
70<option value=90>90</option>
71</select>
72
73        Fill <input id='fillCheckbox' type='checkbox' checked/>
74<input id='eraseAllButton' type='button' value='Erase all'/>
75</div>
76
77<script src = 'example.js'></script>
78</body>
79</html>
example.js代码：
1var canvas = ElementById('canvas'),
2    context = Context('2d'),
3    eraseAllButton = ElementById('eraseAllButton'),
4    strokeStyleSelect = ElementById('strokeStyleSelect'),
5    startAngleSelect = ElementById('startAngleSelect'),  6
7    fillStyleSelect = ElementById('fillStyleSelect'),
8    fillCheckbox = ElementById('fillCheckbox'),
9
10    sidesSelect = ElementById('sidesSelect'),
11
12    drawingSurfaceImageData,
13
14    mousedown = {},
15    rubberbandRect = {},
16    dragging = false,
17
18    sides = 8,
19    startAngle = 0,
20
21    guidewires = true,
22
23    Point = function (x, y) {
24this.x = x;
25this.y = y;
26    };
27
28
29//
30
31function drawGrid(color, stepx, stepy) {
32    context.save()
33
34    context.strokeStyle = color;
35    context.fillStyle = '#ffffff';
36    context.lineWidth = 0.5;
37    context.fillRect(0, 0, context.canvas.width, context.canvas.height); 38
39for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
40      context.beginPath();
41      veTo(i, 0);
42      context.lineTo(i, context.canvas.height);
43      context.stroke();
44    }
45
46for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
47      context.beginPath();
48      veTo(0, i);
49      context.lineTo(context.canvas.width, i);
50      context.stroke();
51    }
52
53    store();
54 }
55
56function windowToCanvas(e) {
57var x = e.x || e.clientX,
58        y = e.y || e.clientY,
59        bbox = BoundingClientRect();
60
61return { x: x - bbox.left * (canvas.width  / bbox.width),
62            y: y - p  * (canvas.height / bbox.height)
63          };
64 }
65
66// Save and restore .
67
68function saveDrawingSurface() {
69    drawingSurfaceImageData = ImageData(0, 0,
70                              canvas.width,
71                              canvas.height);
72 }
73
74function restoreDrawingSurface() {
75    context.putImageData(drawingSurfaceImageData, 0, 0);
76 }
77
78// .
79
80function updateRubberbandRectangle(loc) {
81    rubberbandRect.width = Math.abs(loc.x - mousedown.x);
82    rubberbandRect.height = Math.abs(loc.y - mousedown.y);
83
84if (loc.x > mousedown.x) rubberbandRect.left = mousedown.x;
85else                    rubberbandRect.left = loc.x;
86
87if (loc.y > mousedown.y) p = mousedown.y;
88else                    p = loc.y;
89 }
90
91function getPolygonPoints(centerX, centerY, radius, sides, startAngle) {
92var points = [],
93        angle = startAngle || 0;
94
95for (var i=0; i < sides; ++i) {
96      points.push(new Point(centerX + radius * Math.sin(angle),
97                        centerY - radius * s(angle)));
98      angle += 2*Math.PI/sides;
99    }
100
101return points;
102 }
103
104function createPolygonPath(centerX, centerY, radius, sides, startAngle) { 105var points = getPolygonPoints(centerX, centerY, radius, sides, startAngle); 106
107    context.beginPath();
108
109    veTo(points[0].x, points[0].y);
110
111for (var i=1; i < sides; ++i) {
112      context.lineTo(points[i].x, points[i].y);
113    }
114
115    context.closePath();
116 }
117
118function drawRubberbandShape(loc, sides, startAngle) {
119    createPolygonPath(mousedown.x, mousedown.y,
120                      rubberbandRect.width,
121                      parseInt(sidesSelect.value),
122                      (Math.PI / 180) * parseInt(startAngleSelect.value));
123    context.stroke();
124
125if (fillCheckbox.checked) {
126      context.fill();
127    }
128 }
129
130function updateRubberband(loc, sides, startAngle) {
131    updateRubberbandRectangle(loc);
132    drawRubberbandShape(loc, sides, startAngle);
133 }
134
135//
136
137function drawHorizontalLine (y) {
138    context.beginPath();
139    veTo(0,y+0.5);
140    context.lineTo(context.canvas.width,y+0.5);
141    context.stroke();
142 }
143
144function drawVerticalLine (x) {
145    context.beginPath();
146    veTo(x+0.5,0);
147    context.lineTo(x+0.5,context.canvas.height);
148    context.stroke();
149 }
150
151function drawGuidewires(x, y) {
152    context.save();
153    context.strokeStyle = 'rgba(0,0,230,0.4)';
154    context.lineWidth = 0.5;
155    drawVerticalLine(x);
156    drawHorizontalLine(y);
157    store();
158 }
159
160//
161
usedown = function (e) {
163var loc = windowToCanvas(e);
164
165    saveDrawingSurface();
166
167    e.preventDefault(); // prevent cursor change
168
169    saveDrawingSurface();
170    mousedown.x = loc.x;
171    mousedown.y = loc.y;
172    dragging = true;
173 };
174
usemove = function (e) {
176var loc;
177
178if (dragging) {
179      e.preventDefault(); // prevent selections
180
181      loc = windowToCanvas(e);
182      restoreDrawingSurface();
183      updateRubberband(loc, sides, startAngle);
184
185if (guidewires) {
186          drawGuidewires(mousedown.x, mousedown.y);
187      }
188    }html矩形框代码怎么写
189 };
190
useup = function (e) {
192var loc = windowToCanvas(e);
193    dragging = false;
194    restoreDrawingSurface();
195    updateRubberband(loc);
196 };
197
lick = function (e) {
199    context.clearRect(0, 0, canvas.width, canvas.height);
200    drawGrid('lightgray', 10, 10);
201    saveDrawingSurface();
202 };
203
hange = function (e) {
205    context.strokeStyle = strokeStyleSelect.value;
206 };
207
hange = function (e) {
209    context.fillStyle = fillStyleSelect.value;
210 };
211
212//
213
214 context.strokeStyle = strokeStyleSelect.value;
215 context.fillStyle = fillStyleSelect.value;
216 drawGrid('lightgray', 10, 10);
上述程序清单中的代码⾸先获取了指向canvas绘图环境对象的引⽤，并且定义了⼀个名为point的对象。
getPolygonPoints（）函数创建并返回了⼀个含有多边形顶点的数组，这个多边形是由该函数的5个参数所确定的。该函数运⽤图所写的算式来计算各个顶点的坐标，并创建了⼀个包含这些顶点的数组。
createPolygonPath（）函数调⽤getPolygonPoints（）函数，以获取包含指定多边形各个顶点的数组。该函数先移动到第⼀个顶点，然后创建⼀条包含此多边形所有顶点的路径。
最后，应⽤程序调⽤drawRubberbandShape（）函数来完成多边形的绘制，这个函数是由上次中的那个drawRubberbandShape（）函数改编⽽来的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。