Не рисует картинку в canvas. В чем ошибка не понятно

@alp7 · Регистрация: 02.09.2017

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

Собственно весь код. Если меняешь в ctx.drawImage(ph1, 0, 0); координаты меняется цвет канваса.

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d");
var timer = null;
const UPDATE_TIME = 1000 /40;
var ph1 = new Image();
ph1.src = "pics/020.png";
Start();
 
function Start()
{   
timer = setInterval(Update, UPDATE_TIME); 
}
function Update() 
{ 
Draw();
} 
function Draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(ph1, 0, 0);
ctx.fillStyle = "#000";
ctx.font = "20px Verdana";
ctx.fillText("Score ", canvas.width/2, 20);
}

@Igor-san · 24.01.2023, 21:32

А если так ?

JavaScript    
        
    Скопировано
1
canvas[0].getContext("2d");

@brian778 · 24.01.2023, 21:57

Всё работает

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
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d");
var timer = null;
const UPDATE_TIME = 1000 /40;
var ph1 = new Image();
ph1.src = "pics/020.png";
Start();
 
function Start()
{   
timer = setInterval(Update, UPDATE_TIME); 
}
function Update() 
{ 
Draw();
} 
function Draw(){
 
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(ph1, 0, 0);
ctx.fillStyle = "#000";
ctx.font = "20px Verdana";
ctx.fillText("Score ", canvas.width/2, 20);
}
</script>

@alp7 · 24.01.2023, 23:13 **[ТС]**

Странно. у меня нет. Может дело в HTML.
или как вариант видеокарточка глючит, с нее драйвера слетели, но простую графику она отражает.

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
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
<!DOCTYPE html>
<html>
    <head>
        <title>Score</title>
        <link rel="stylesheet" href="style.css">
    
 
    <meta charset="utf-8">
        <meta name='viewport' 
 
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, 

user-scalable=0' />
        <meta name="apple-mobile-web-app-

capable" content="yes">
        <meta name="mobile-web-app-capable" 
 
content="yes">
        <meta name="HandheldFriendly" 
 
content="true"/>
    </head>
    <body>
        <div class="wrapper">
    
 
        <iframe src="game.html" border="0" width="800" 
 
height="600"></iframe>
        </div>
    </body>
</html>

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
    <head>
        <title>Score</title>
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8">
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="HandheldFriendly" content="true"/>
    </head>
    <body>
        <div class="wrapper">
            <canvas width="0" height="0" class="canvas" id="canvas">Your browser does not support JavaScript and HTML5!</canvas>
        </div>
        <script src="game.js"></script>
    </body>
</html>

css

CSS    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body, html
{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
 
.wrapper
{
    width: 100%;
    height: 100%;
}
 
.canvas
{
    width: 100%;
    height: 100%;
    background: #000;
}

@Deitsura · 25.01.2023, 06:49

13 строка <canvas width="0" height="0" class="canvas" id="canvas">Your browser does not support JavaScript and HTML5!</canvas>
у вас width и height канваса равны нулю, так как ему рисовать если его по факту нет, задайте этот параметр либо в htm либо напрямую через JS

JavaScript    
        
    Скопировано
1
2
3
var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;

Новые блоги и статьи Все статьи Все блоги /
JavaScript: Управление памятью и улучшение производительности run.dev 29.03.2025 В отличие от низкоуровневых языков программирования, JavaScript не требует ручного выделения и освобождения памяти. Здесь работает автоматический сборщик мусора, который определяет, какие объекты. . .	Мультитенантная архитектура со SpringBoot и PostgreSQL ArchitectMsa 29.03.2025 SaaS-приложения редко обслуживают одного клиента и обычно они должны поддерживать множество организаций, каждая из которых работает в своём изолированном пространстве. Мультитенантная архитектура. . .	std::span в C++: Производительность и лучшие практики NullReferenced 28.03.2025 std::span — одно из самых недооценённых нововведений стандарта C++20, которое радикально меняет подход к работе с непрерывными последовательностями данных. По сути, это невладеющее представление. . .	Многопоточность в C#: Threadpool UnmanagedCoder 28.03.2025 Пул потоков в C# — это коллекция заранее созданных и готовых к использованию потоков, которые находятся в распоряжении приложения. Вместо того чтобы создавать и уничтожать потоки для каждой небольшой. . .	Вопросы на собеседованиях по микросервисам ArchitectMsa 27.03.2025 Работодатели ищут не просто разработчиков, знающих базовые концепции, а специалистов, разбирающихся в тонкостях масштабирования, отказоустойчивости и производительности. Сейчас на первый план выходят. . .
Взаимодействие Python с REST API py-thonny 27.03.2025 REST API - это архитектурный стиль взаимодействия компонентов распределённого приложения в сети. Python располагает функциональным набором инструментов для работы с REST API и основная библиотека для. . .	sshd restrictions, ssh access limitations jigi33 26.03.2025 sshd restrictions \| ssh access limitations рестрикции доступа на сервер sshd статья: https:/ / www. golinuxcloud. com/ restrict-allow-ssh-certain-users-groups-rhel	Компиляция C++ с Clang API NullReferenced 24.03.2025 Компиляторы обычно воспринимаются как черные ящики, которые превращают исходный код в исполняемые файлы. Мы запускаем компилятор командой в терминале, и вуаля — получаем бинарник. Но что если нужно. . .	Многопоточность в C#: Класс Thread UnmanagedCoder 24.03.2025 Когда запускается приложение на компьютере, операционная система создаёт для него процесс - виртуальное адресное пространство. В C# этот процесс изначально получает один поток выполнения — главный. . .	SwiftUI Data Flow: Передача данных между представлениями mobDevWorks 23.03.2025 При первом знакомстве со SwiftUI кажется, что фреймворк предлагает избыточное количество механизмов для передачи данных: @State, @Binding, @StateObject, @ObservedObject, @EnvironmentObject и другие. . . .