HTML 5 - приложение для рисования с Canvas не рисует - PullRequest
Новая
       1

HTML 5 - приложение для рисования с Canvas не рисует

0 голосов
/ 08 января 2019

Я пытался создать приложение для рисования с помощью canvas так: 

<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        canvas{
            border: 1px solid black
            }
    </style>
    <title>Qui sommes-nous?</title>
</head>

<body>
    <canvas id = "a" width = "400" height = "200"></canvas>
    <script type="text/javascript">
    var md = false;
    var canvas = document.getElementById('a');
    canvas.addEventListener('mousedown', down);
    canvas.addEventListener('mouseup', toggledraw);
    canvas.addEventListener('mousemove',
    function (evt){
        var mousePos = getMousePos (canvas, evt);
        var posx = mousePos;.x;
        var posy = mousePos.y;
        draw(canvas, posx, posy);
    });
    function down(){
        md = true;
    }
    function toggledraw(){
        md = false;
    }
    function getMousePos(canvas, evt){
        var rect = canvas.getBoundingClientRect();
        return {
            x:evt.clientX - rect.left, 
            y:evt.clientY - rect.top
        };
    }
    function draw (canvas, posx, posy){
        var context = canvas.getContext('2d');
        if (md){
            context.fillRect(posx, posy, 4, 4);
        }
    }
    </script>
</body>

Однако, когда я пытаюсь рисовать на экране, ничего не происходит. Я пробовал это на Chrome, Firefox и Safari. Я искал самый простой способ, но я не понимаю свою ошибку ... Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 08 января 2019

При отладке вы должны заглянуть в консоль (инструменты разработчика), прежде чем спрашивать здесь. В вашем случае у вас есть синтаксическая ошибка var posx = mousePos;.x; - первого ; не должно быть. 

var md = false;
var canvas = document.getElementById('a');
canvas.addEventListener('mousedown', down);
canvas.addEventListener('mouseup', toggledraw);
canvas.addEventListener('mousemove',
function (evt){
    var mousePos = getMousePos (canvas, evt);
    var posx = mousePos.x;
    var posy = mousePos.y;
    draw(canvas, posx, posy);
});
function down(){
    md = true;
}
function toggledraw(){
    md = false;
}
function getMousePos(canvas, evt){
    var rect = canvas.getBoundingClientRect();
    return {
        x:evt.clientX - rect.left, 
        y:evt.clientY - rect.top
    };
}
function draw (canvas, posx, posy){
    var context = canvas.getContext('2d');
    if (md){
        context.fillRect(posx, posy, 4, 4);
    }
}
canvas{
  border: 1px solid black;
}
<canvas id="a" width="400" height="200"></canvas>
0 голосов
/ 08 января 2019

В строке 8 у вас есть: 

var posx = mousePos;.x;

; неверно. Это правильно: 

var posx = mousePos.x;


var md = false;
    var canvas = document.getElementById('a');
    canvas.addEventListener('mousedown', down);
    canvas.addEventListener('mouseup', toggledraw);
    canvas.addEventListener('mousemove',
    function (evt){
        var mousePos = getMousePos (canvas, evt);
        var posx = mousePos.x;
        var posy = mousePos.y;
        draw(canvas, posx, posy);
    });
    function down(){
        md = true;
    }
    function toggledraw(){
        md = false;
    }
    function getMousePos(canvas, evt){
        var rect = canvas.getBoundingClientRect();
        return {
            x:evt.clientX - rect.left, 
            y:evt.clientY - rect.top
        };
    }
    function draw (canvas, posx, posy){
        var context = canvas.getContext('2d');
        if (md){
            context.fillRect(posx, posy, 4, 4);
        }
    }
canvas {
  border: 1px solid black;
}
<canvas id="a" width="400" height="200"></canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...