Question

我正在开发一个使用HTML 5 Canvas绘图的应用程序，它在计算机浏览器上运行良好的问题就像这张照片 http://s28.postimg.org/z0ytnva98/problem.jpg

我想让它在移动浏览器上工作（不要介意同时使用移动浏览器，我想要的是移动浏览器）。我的代码中有关Java Script事件的问题。我将其更改为

canvas.addEventListener('touchstart' , engage);
canvas.addEventListener('touchmove', putpoint);
canvas.addEventListener('touchend' , disengage);

但是没用，我也试过了

canvas.addEventListener('touchstart' , engage);
canvas.addEventListener('touchmove', putpoint);
canvas.addEventListener('touchleave' , disengage);

也没用。当我离开它时，就像这样

canvas.addEventListener('mousedown' , engage);
canvas.addEventListener('mousemove', putpoint);
canvas.addEventListener('mouseup' , disengage);

它只是像这张照片一样 http://s14.postimg.org/tadk87jpt/Screenshot_2015_02_15_20_16_32.png

这是我的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drawing app</title>
<body style="overflow: hidden">
<canvas id="canvas" style="width:100% ; height:100%">
    Your browser does not support canvas element.
</canvas>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        radius = 20,
        dragging = false;

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    context.lineWidth = radius*2;
    var putpoint = function(e){
        if(dragging){
            context.lineTo(e.clientX, e.clientY);
            context.stroke();
            context.beginPath();
            context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
            context.fill();
            context.beginPath();
            context.moveTo(e.clientX, e.clientY);
        }
    };

    var engage = function(e){
        dragging = true;
        putpoint(e);
        };

    var disengage = function(){
        dragging = false;
        context.beginPath();
        };

    canvas.addEventListener('mousedown' , engage);
    canvas.addEventListener('mousemove', putpoint);
    canvas.addEventListener('mouseup' , disengage);
</script>

Answer 1

来自MDN的不同touch events的描述似乎正在构建一个演示来完成您正在尝试做的事情。看看他们在解决方案中做了什么。

如何使这个应用程序与移动浏览器一起使用？

1 个答案: