Почему открывается пустая страница?

@JohnChaban · Регистрация: 22.03.2013

Студворк — интернет-сервис помощи студентам

Добрый день
Я приведу код ниже.
Подскажите почему открывается пустая страница?
КОД:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE HTML>
<html>
    <head>
        <title>html5canvas.ru</title>
        <META charset = "utf-8">
        <script>
function draw() {
  context.fillStyle = "#BDBDFF";
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.font = "30pt Calibri";
  context.textAlign = "center";
  context.fillStyle = "#fff";
  context.fillText(text, canvas.width / 2, canvas.height / 2);
}
function mouseover() {
  text = "Курсор на холсте!";
}
function mouseout() {
  text = "Курсор за пределами =(";
}
function draw() {
  context.fillStyle = "#BDBDFF";
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.font = "30pt Calibri";
  context.textAlign = "center";
  context.fillStyle = "#fff";
  context.fillText(text, canvas.width / 2, canvas.height / 2);
}
function mousemove(evt) {
  var mouseX = evt.pageX - canvas.offsetLeft;
  var mouseY = evt.pageY - canvas.offsetTop;
  text = "Координаты "+mouseX+":"+mouseY;
}
function init() {
  canvas = document.getElementById("example");
  context = canvas.getContext("2d");
  canvas.width = 480;
  canvas.height = 160;
  text = "Наведи на меня!";
  canvas.onmousemove = mousemove;
  setInterval(draw, 1000 / 60);
}
function init() {
  canvas = document.getElementById("example");
  context = canvas.getContext("2d");
  canvas.width = 480;
  canvas.height = 160;
  width = 100;
  height = 70;
  drag = false; // переменная истинная когда зажата кнопка мыши
  dragRect = new Shape(canvas.width / 2 - width / 2, canvas.height / 2 - height / 2, width, height);
  canvas.onmousedown = mouseDown;
  setInterval(draw, 1000 / 60);
}
function draw() {
  context.fillStyle = "#BDBDFF";
  context.fillRect(0, 0, canvas.width, canvas.height);
  dragRect.draw();
}
function Shape(topX, topY, width, height, fillColor, strokeColor) {
  this.x = topX;
  this.y = topY;
  this.height = height; // Высота
  this.width = width; // Ширина
  this.offsetX = 0;
  this.offsetY = 0;
  this.draw = function() // Метод рисующий прямоугольник
  {
    context.fillStyle = "#7777FF";
    context.fillRect(this.x, this.y, this.width, this.height);
    context.lineWidth = 2;
    context.strokeStyle = "#00003A";
    context.strokeRect(this.x, this.y, this.width, this.height);
  }
}
function mouseDown(evt) {
  var mouseX = evt.pageX - canvas.offsetLeft;
  var mouseY = evt.pageY - canvas.offsetTop;
  if (mouseX < dragRect.x + dragRect.width && mouseX > dragRect.x && mouseY < dragRect.y + dragRect.height && mouseY > dragRect.y) {
    drag = true;
    dragRect.offsetX = mouseX - dragRect.x + 8;
    dragRect.offsetY = mouseY - dragRect.y + 8;
    canvas.onmousemove = mouseMove;
    canvas.onmouseup = mouseUp;
  }
}
function mouseMove(evt) {
  var mouseY = evt.pageY;
  var mouseX = evt.pageX;
  if (drag) {
    dragRect.x = pageX - dragRect.offsetX;
    dragRect.y = pageY - dragRect.offsetY;
  }
}
function mouseUp(evt) {
  drag = false;
}
function init() {
  canvas = document.getElementById("example");
  context = canvas.getContext("2d");
  canvas.width = 480;
  canvas.height = 160;
  text = "Наведи на меня!";
  canvas.onmouseover = mouseover;
  canvas.onmouseout = mouseout;
  setInterval(draw, 1000 / 60);
}
       </script>
    </head>
    <body onload="init()">
        <canvas id="example"> </canvas>
    </body>
</html>

@amadey18 · 13.02.2015, 15:33

откройте дебаггер в браузере.
у вас ошибка
ReferenceError: dragRect is not defined
dragRect.draw();
строка 58

Новые блоги и статьи Все статьи Все блоги /
Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .

@amadey18 92 / 92 / 51 Регистрация: 29.04.2013 Сообщений: 361
	13.02.2015, 15:33
	откройте дебаггер в браузере. у вас ошибка ReferenceError: dragRect is not defined dragRect.draw(); строка 58 0