Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Кучеренко Александр #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Кучеренко Александр #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 82 additions & 95 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,108 +3,95 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache"/>

<script>
//пример рисования произвольного множества точек
function example1() {
//получаем html-элемент типа canvas и его характеристики
var canvas = document.getElementById("canvas1");
var canvasHeight = parseInt(canvas.getAttribute("height"));
var canvasWidth = parseInt(canvas.getAttribute("width"));

//создаем 2d context
var context = canvas.getContext('2d');

//создаем "буфер" imageData, в который будем класть новую информацию о цветах
var imageData = context.createImageData(canvasWidth, canvasHeight);
for (var i = 0; i < canvasWidth; i++) {
for (var j = 0; j < canvasHeight; j++) {
var red = 0;
var green = 0;
var blue = (i + j) % 255;
if (i % 20 == 0)
red = 150;
if (j % 20 == 0)
green = 150;
var opacity = 255;

imageData.data[4*(i + canvasWidth*j) + 0] = red;
imageData.data[4*(i + canvasWidth*j) + 1] = green;
imageData.data[4*(i + canvasWidth*j) + 2] = blue;
imageData.data[4*(i + canvasWidth*j) + 3] = opacity;
}
}
//заполненный "буфер" imageData передаем в context для вывода на экран
context.putImageData(imageData, 0, 0);
<style>
table {
width: 200px;
float: right;
}

//пример рисования отдельных линий
function example2() {
//получаем html-элемент типа canvas и его характеристики
var canvas = document.getElementById("canvas2");
var canvasHeight = parseInt(canvas.getAttribute("height"));
var canvasWidth = parseInt(canvas.getAttribute("width"));

//создаем 2d context
var context = canvas.getContext('2d');

//задаем стиль линий
context.lineWidth = "5";
context.strokeStyle = "green";

//начинаем создание нового пути
context.beginPath();
//задаем начальную точку линии
context.moveTo(0, 75);
//задаем конечную точку линии и добавляем линию в путь
context.lineTo(150, 100);
//выводим путь на экран
context.stroke();

input {
margin: 0 3px;
width: 30px;
}

#n-count {
width: 70px;
}

canvas {
border: 1px solid grey;
}
</style>
<script>
function snowflake() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
var ax = Number(document.getElementById("point-one-x").value);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

А тут не надо сказать new Number? Хотя более явно - parseInt

var ay = Number(document.getElementById("point-one-y").value);
var bx = Number(document.getElementById("point-two-x").value);
var by = Number(document.getElementById("point-two-y").value);
var n = Number(document.getElementById("n-count").value);
//достраиваем третью вершину по двум заданным
var u = {x: bx - ax, y: by - ay};
var v = {x: ay - by, y: bx - ax};
var q = {x: ax + 1/2*u.x - Math.sqrt(3)/2*v.x, y: ay + 1/2*u.y - Math.sqrt(3)/2*v.y};
var points = [{x: ax, y: ay}, {x: bx, y: by}, {x: q.x, y: q.y}];
points = makeFractPoints(points, n);
draw(points, ctx);
}

//пример рисования полилиний (сначала вычисляем точки, затем рисуем)
function example3() {
//получаем html-элемент типа canvas и его характеристики
var canvas = document.getElementById("canvas3");
var canvasHeight = parseInt(canvas.getAttribute("height"));
var canvasWidth = parseInt(canvas.getAttribute("width"));

//создаем 2d context
var context = canvas.getContext('2d');

//задаем стиль линий
context.lineWidth = "2";
context.strokeStyle = "#FF0000";

//создаем массив точек
//в качестве точек используются анонимные объекты со свойствами x и y
var points = [{x: 20, y: 50}, {x: 120, y: 50}, {x: 120, y: 100}, {x: 50, y: 20}];

//начинаем создание нового пути
context.beginPath();
//добавляем в путь все точки из массива
for (var i = 0; i < points.length; i++) {
var point = points[i];
if (i == 0)

function draw(points, context) {
context.beginPath();
for (var i = 0; i < points.length+1; i++) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Можно сделать цикл с границами i = 1; i < points.length. А хитрая логика внутри цикла исчезнет. Код станет более прямолинейным.

var arg = i % points.length;
var point = points[arg];
if (i == 0)
context.moveTo(point.x, point.y);
else
context.lineTo(point.x, point.y);
else context.lineTo(point.x, point.y);
}
//выводим путь на экран
context.stroke();
}

//вызывается после загрузки body
function run () {
example1();
example2();
example3();
}

function makeFractPoints(points, n) {
for (n; n > 0; n--) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

в таком случае можно писать for (; n> 0; n--), или просто использовать цикл while

var counter = 0;
var cycleCounter = points.length;
for (var i = 0; i < cycleCounter; i++) {
//a,b - точки рассматриваемого отрезка; p,q,r - точки образуемого треугольника
var a = points[i + counter];
var b = points[(i + counter + 1) % points.length];
var u = {x: b.x - a.x, y: b.y - a.y};
var v = {x: a.y - b.y, y: b.x - a.x};
//считаем координаты треугольника
var p = {x: a.x + 1/3*u.x, y: a.y + 1/3*u.y};
var q = {x: a.x + 1/2*u.x + Math.sqrt(3)/6*v.x, y: a.y + 1/2*u.y + Math.sqrt(3)/6*v.y};
var r = {x: a.x + 2/3*u.x, y: a.y + 2/3*u.y};
points.splice(counter + i + 1, 0 , r);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

кажется тебе здесь нужен метод push.

points.splice(counter + i + 1, 0 , q);
points.splice(counter + i + 1, 0 , p);
counter += 3;
}
}
return points;
}
</script>

<body onload="run()">
<canvas height='200' width='200' id='canvas1'></canvas>
<canvas height='200' width='200' id='canvas2'></canvas>
<canvas height='200' width='200' id='canvas3'></canvas>
<body onload = "snowflake()">
<table>
<tr>
<td>1st point: </td><td><input id = "point-one-x" placeholder="X" value = "300"><input id = "point-one-y" placeholder="Y" value = "300"></td>
</tr>
<tr>
<td>2nd point: </td><td><input id = "point-two-x" placeholder="X" value="500"><input id = "point-two-y" placeholder="Y" value="300"></td>
</tr>
<tr>
<td>N count: </td><td><input id = "n-count" value = 5></td>
</tr>
<tr>
<td colspan = "2"><button onclick = "snowflake()">Go</button></td>
</tr>
</table>
<canvas height='600' width='1000' id='canvas'></canvas>
</body>
</html>