如何使此应用程序与移动浏览器协同工作

How is it possible to make this app working with mobile browsers?

本文关键字：浏览器 协同工作 移动 何使此 应用程序      更新时间：2023-11-22

我正在开发一个使用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>

MDN对不同触摸事件的描述似乎是在构建一个演示来做你想做的事情。看看他们在解决方案中做了什么。

相关文章：