Разрабатываем переменную-"цветок" на JavaScript
Немного недоделанный простой графический "цветок", но показывающий ещё одну альтернативу - как обернуть "библиотечный" Javascript-объект не в анонимную функцию с инкапсулированным внутрь кодом и не писать класс, ограничившись именованной переменной-обёрткой.
Небольшие синтаксические заморочки в этом случае, думаю, ничему не помеха - зато можно иметь весь скрипт в одной переменной и не вызывать никаких конструкторов для создания объекта.
Ниже показан пример в работе, а следом прикреплён код (без внешних обрамляющих тегов HTML, предполагается кодировка Юникода UTF-8).
<canvas id="myCanvas" width="500" height="500" style="border: 1px black dotted;"></canvas> <script> var flower = { //Весь скрипт будет одной переменной init: function (id) { this.canvas = document.getElementById (id); this.ctx = this.canvas.getContext('2d'); }, petal: [ //Опорные точки лепестка [ [0,0], [0.33,-1], [0.66,-1], [1,0], [0.66,1], [0.33,1], [0,0] ], [ [0, 0], [1, 0] ] //Центральная линия ], drawPetal: function (w, h) { let i = 0; do { let p = this.petal[i]; let j = 0; this.ctx.moveTo (p[j][0]*w,p[j++][1]*h); while (j < p.length - 1) { this.ctx.lineTo (p[j][0]*w,p[j++][1]*h); } if (p[j][0]==p[0][0] && p[j][1]==p[0][1]) this.ctx.closePath(); //закрыть путь, когда замкнулся else this.ctx.lineTo (p[j][0]*w,p[j][1]*h); } while (++i < this.petal.length); }, drawPetals: function (x,y,cnt,angle) { let step = 2 * Math.PI / cnt; this.ctx.setTransform (1,0,0,1,x,y); this.ctx.rotate (angle); this.petalScale = 0.5; //можно предусмотреть отдельную настройку for (let i = 0; i < cnt; i++) { this.drawPetal(this.w * this.petalScale, this.h * this.petalScale / 5); this.ctx.rotate (step); } this.ctx.setTransform (1,0,0,1,0,0); }, draw: function (color, width, scale, count) { this.ctx.strokeStyle = color; this.ctx.lineWidth = width; this.w = this.canvas.width; this.h = this.canvas.height; this.size = scale * Math.min(this.w, this.h); this.ctx.beginPath(); this.drawPetals (this.w/2, this.h/2, count, Math.PI / 2); this.ctx.stroke(); this.ctx.beginPath(); //центральный кружок this.centralCircleSize = 0.1; //можно предусмотреть отдельную настройку this.ctx.arc(this.w/2, this.h/2, this.size * this.centralCircleSize, 0, 2*Math.PI); this.ctx.fillStyle = color; this.ctx.fill(); } }; </script> <p>Практически удобней подключить script выше отдельным файлом</p> <script> flower.init ('myCanvas'); flower.draw ('red',2,0.95,5); //цвет, толщина линии, масштаб, количество лепестков </script>
25.02.2021, 14:46 [918 просмотров]