运行我的脚本时，浏览器中的javascript控制台没有响应_Javascript_Html_Canvas

运行我的脚本时，浏览器中的javascript控制台没有响应

javascript html canvas

运行我的脚本时，浏览器中的javascript控制台没有响应,javascript,html,canvas,Javascript,Html,Canvas,我编写了一个简单的脚本来在HTML5画布上绘制路径，但是在chrome中运行javascript时：路径越长（如我所画），页面的响应性就越差，最终javascript控制台完全卡住了，我注意到CPU几乎100%忙。你能给我一些提示吗这是我的密码： <!DOCTYPE html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">

我编写了一个简单的脚本来在HTML5画布上绘制路径，但是在chrome中运行javascript时：

路径越长（如我所画），页面的响应性就越差，最终javascript控制台完全卡住了，我注意到CPU几乎100%忙。你能给我一些提示吗

这是我的密码：

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        var clickX = new Array();
        var clickY = new Array();
        var clickDrag = new Array();
        var paint;
        var context;

        window.onload =function(){init();}; 

        function init(){
            context = document.getElementById("surface").getContext("2d");

            $('#surface').mousedown(function(e){
                var touchX = e.pageX - this.offsetLeft;
                var touchY = e.pageY - this.offsetTop;

                paint = true;
                addClick(touchX, touchY);
                redraw();
            });
            $('#surface').mousemove(function(e){
                if(paint){
                    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
                    redraw();
                }
            });
            $('#surface').mouseup(function(e){
                paint = false;
            });
            $('#surface').mouseleave(function(e){
                paint = false;
            });
        };
        function addClick(x, y){
            clickX.push(x);
            clickY.push(y);
        }

        function redraw(){
            context.strokeStype = "#df4b26";
            context.lineJoin = "round";
            context.lineWidth = 5;

            console.log(clickX.length);
            context.beginPath();
            for(var i=0; i<clickX.length;i++){
                context.lineTo(clickX[i], clickY[i]);
                console.log(clickX[i]+", "+clickY[i]);
                context.stroke();
            }
            context.closePath();
        }
    </script>
</head>
<body>
    <canvas id="surface" style="border:1px solid #000000;"  width="800" height ="600"></canvas>
</body>


var clickX=新数组（）；
var clickY=新数组（）；
var clickDrag=新数组（）；
var涂料；
var语境；
window.onload=function（）{init（）；}；
函数init（）{
context=document.getElementById（“表面”）.getContext（“2d”）；
$（“#曲面”）.mousedown（函数（e）{
var touchX=e.pageX-this.offsetLeft；
var touchY=e.pageY-this.offsetTop；
油漆=真；
addClick（touchX，toucy）；
重画（）；
});
$（'#surface'）.mousemove（函数（e）{
如果（油漆）{
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop）；
重画（）；
}
});
$（'#surface'）.mouseup（函数（e）{
油漆=假；
});
$（“#surface”）.mouseleave（函数（e）{
油漆=假；
});
};
函数addClick（x，y）{
点击x，推送（x）；
clickY.push（y）；
}
函数重画（）{
context.strokeStype=“#df4b26”；
context.lineJoin=“round”；
context.lineWidth=5；
console.log（点击X.length）；
context.beginPath（）；
对于（var i=0；i请尝试下面的代码。希望这对您有用
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        var paint;
        var context;

        window.onload =function(){init();}; 

        function init(){
            context = document.getElementById("surface").getContext("2d");

            $('#surface').mousedown(function(e){
                var touchX =  e.pageX; //e.pageX - this.offsetLeft;
                var touchY = e.pageY; //e.pageY - this.offsetTop;

                paint = true;
                context.beginPath();
                redraw(touchX, touchY);
            });
            $('#surface').mousemove(function(e){
                if(paint){
                    var touchX =  e.pageX; //e.pageX - this.offsetLeft;
                    var touchY = e.pageY; //e.pageY - this.offsetTop;
                    redraw(touchX, touchY);
                }
            });
            $('#surface').mouseup(function(e){
                paint = false;
            });
            $('#surface').mouseleave(function(e){
                paint = false;
            });
        };

        function redraw(nextX,nextY){
            context.strokeStype = "#df4b26";
            context.lineJoin = "round";
            context.lineWidth = 5;

            console.log(clickX.length);

                context.lineTo(nextX, nextY);
                console.log(nextX+", "+nextY);
                context.stroke();
            //context.closePath();
        }
    </script>
</head>
<body>
    <canvas id="surface" style="border:1px solid #000000;"  width="800" height ="600"></canvas>
</body>


var涂料；
var语境；
window.onload=function（）{init（）；}；
函数init（）{
context=document.getElementById（“表面”）.getContext（“2d”）；
$（“#曲面”）.mousedown（函数（e）{
var touchX=e.pageX；//e.pageX-this.offsetLeft；
var touchY=e.pageY；//e.pageY-this.offsetTop；
油漆=真；
context.beginPath（）；
重画（touchX，toucy）；
});
$（'#surface'）.mousemove（函数（e）{
如果（油漆）{
var touchX=e.pageX；//e.pageX-this.offsetLeft；
var touchY=e.pageY；//e.pageY-this.offsetTop；
重画（touchX，toucy）；
}
});
$（'#surface'）.mouseup（函数（e）{
油漆=假；
});
$（“#surface”）.mouseleave（函数（e）{
油漆=假；
});
};
函数重绘（nextX、nextY）{
context.strokeStype=“#df4b26”；
context.lineJoin=“round”；
context.lineWidth=5；
console.log（点击X.length）；
lineTo（nextX，nextY）；
console.log（nextX+，“+nextY）；
stroke（）；
//closePath（）；
}
您可以尝试使用此重画功能：
var actClick = 0;
function redraw(){
    context.strokeStype = "#df4b26";
    context.lineJoin = "round";
    context.lineWidth = 5;

    console.log(clickX.length);
    context.beginPath();
    actClick = actClick - 2;
    for( ; actClick < clickX.length ; actClick++ ){
        context.lineTo(clickX[actClick], clickY[actClick]);
        context.stroke();
    }
    context.closePath();
}

var actClick=0；
函数重画（）{
context.strokeStype=“#df4b26”；
context.lineJoin=“round”；
context.lineWidth=5；
console.log（点击X.length）；
context.beginPath（）；
actClick=actClick-2；
对于（；actClick

你可以找到
问题在于，您会在每个新点重新绘制wole图像，因此每个新点都会变慢。
以下是我注意到的一些问题：
重构部分代码后的演示：

您在重画时有一个打字错误（strokeStype
s/bstrokeStyle
）
如果项目不需要保存/重用用户的多段线，则不需要将鼠标位置保存在数组中。只需在每个mousemove事件中添加.lineTo，即可连续绘制直线

一些性能问题：

 调用外部函数（作为您的AdScess）比内联命令慢，因此考虑将AdcCutt代码移到MSOMeWORD处理程序中。
如果未重新定位画布，则可以在开始绘制之前计算一次偏移
在非常活跃的函数（如鼠标处理程序）中重复设置上下文状态（.strokeStyle、.lineJoin、.lineWidth）相对昂贵。如果您的状态在绘制过程中没有更改，请在绘制开始之前设置这些状态一次

示例代码：

正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“表面”）；
var context=canvas.getContext（“2d”）；
var canvasOffset=$（“#曲面”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
context.strokeStyle=“#df4b26”；
context.lineJoin=“round”；
context.lineWidth=5；
var clickX=新数组（）；
var clickY=新数组（）；
var clickDrag=新数组（）；
var涂料；
var语境；
$（“#曲面”）.mousedown（函数（e）{
var touchX=e.clientX-offsetX；
var touchY=e.clientY-offsetY；
油漆=真；
点击X.推送（e.clientX-offsetX）；
clickY.push（例如clientY-offsetY）；
lastX=触摸X；
拉蒂=敏感；
});
$（'#surface'）.mousemove（函数（e）{
如果（油漆）{
var x=e.clientX-offsetX；
变量y=e.clientY-offsetY；
点击x，推送（x）；
clickY.push（y）；
context.beginPath（）；
context.moveTo（lastX，lastY）
林先生
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("surface");
    var context=canvas.getContext("2d");

    var canvasOffset=$("#surface").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    context.strokeStyle = "#df4b26";
    context.lineJoin = "round";
    context.lineWidth = 5;

    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;
    var context;


        $('#surface').mousedown(function(e){
            var touchX = e.clientX - offsetX;
            var touchY = e.clientY - offsetY;

            paint = true;
            clickX.push(e.clientX-offsetX);
            clickY.push(e.clientY-offsetY);
            lastX=touchX;
            lastY=touchY;
        });
        $('#surface').mousemove(function(e){
            if(paint){
                var x=e.clientX-offsetX;
                var y=e.clientY-offsetY;
                clickX.push(x);
                clickY.push(y);
                context.beginPath();
                context.moveTo(lastX,lastY)
                context.lineTo(x,y);
                context.stroke();
                context.closePath();
                lastX=x;
                lastY=y;
            }
        });
        $('#surface').mouseup(function(e){
            paint = false;
        });
        $('#surface').mouseleave(function(e){
            paint = false;
        });


}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="surface" width=300 height=300></canvas>
</body>
</html>