БлогNot. Разрабатываем переменную-"цветок" на JavaScript

Разрабатываем переменную-"цветок" на 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 просмотров]


теги: javascript графика

К этой статье пока нет комментариев, Ваш будет первым