Member 12824995 Ответов: 0

Как подогнать планшетную ручку к холсту

Привет У меня есть ручка для мыши / планшета.
(Это планшет с ручкой.На самом деле это не планшет.Что-то вроде доски с ручкой).
Я хочу написать приложение, чтобы кто-то мог что-то написать на нем и сохранить в виде изображения. Я написал приложение.

Ниже приведена проблема, с которой я столкнулся :-
- Планшет занимает весь экран. Но мне не нужен весь экран.
- У меня есть холст, на котором можно писать, и я просто хочу, чтобы эта табличка вписалась в этот холст.

Должен быть способ. Пожалуйста, помогите мне. Кстати, извините за мой английский.

Вот мой код:

Что я уже пробовал:

<!DOCTYPE html>
<html lang="en">
<canvas id="can" width="100" height="100" style="position:absolute;top:10%;left:10%;border:2px solid;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var canvas = document.querySelector( 'canvas' ),
    c = canvas.getContext( '2d' ),
    mouseX = 0,
    mouseY = 0,
    width = 300,
    height = 300,
    colour = 'red',
    mousedown = false;

    // resize the canvas
    canvas.width = width;
    canvas.height = height;

    function draw() {
    if (mousedown) {
    // set the colour
    c.fillStyle = colour;
    // start a path and paint a circle of 20 pixels at the mouse position
    c.beginPath();
    c.arc( mouseX, mouseY, 2 , 0, Math.PI*2, true );
    c.closePath();
    c.fill();
    }
    }

    // get the mouse position on the canvas
    canvas.addEventListener( 'mousemove', function( event ) {
    if( event.offsetX ){
    mouseX = event.offsetX;
    mouseY = event.offsetY;
    } else {
    mouseX = event.pageX - event.target.offsetLeft;
    mouseY = event.pageY - event.target.offsetTop;
    }
    // call the draw function
    draw();
    }, false );

    canvas.addEventListener( 'mousedown', function( event ) {
    mousedown = true;
    }, false );
    canvas.addEventListener( 'mouseup', function( event ) {
    mousedown = false;
    }, false );

    var link = document.createElement('a');
    link.innerHTML = 'download image';
    link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
    }, false);
    document.body.appendChild(link);
</script>
</body>
</html>

Suvendu Shekhar Giri

Вы пытаетесь использовать события мыши, и если вы отключите их вне холста, как вы должны делать другие вещи, такие как переключение между другими приложениями или закрытие приложения или что-то еще?

Поставляется ли эта ручка с какой-либо документацией/sdk или чем-то еще?

Неужели я упускаю здесь что-то очень важное?

Richard Deeming

Почему ваш <canvas> тег объявлен снаружи из <body> тег? Так и должно быть внутри:

<body>
    <canvas ...>
    <script>
    ...
    </script>
</body>

0 Ответов