javascript代码中的错误迭代裁剪函数_Javascript_Canvas

javascript代码中的错误迭代裁剪函数

javascript canvas

javascript代码中的错误迭代裁剪函数,javascript,canvas,Javascript,Canvas,我编写了这段代码，将用户加载的图像分解为矩形块，并继续（在用户输入时）显示每一块，并在其自身和相邻块之间留出一点距离我怀疑调用该函数来中断和显示每个元素是问题的原因，但无法确定是哪个部分 function breakez() { // More to add, unfinished var first = 0; var piece_x = (ell.width%mouse_xt); var piece_y = (ell.height%mouse_yt);

我编写了这段代码，将用户加载的图像分解为矩形块，并继续（在用户输入时）显示每一块，并在其自身和相邻块之间留出一点距离

我怀疑调用该函数来中断和显示每个元素是问题的原因，但无法确定是哪个部分

function breakez()
{
    // More to add, unfinished
    var first = 0;
    var piece_x = (ell.width%mouse_xt);
    var piece_y = (ell.height%mouse_yt);
    var old_values = new Array;
    var counter_i = 0 ;
    var counter_j = 0;
    for(var _x=0;_x<= old_width;_x=_x+mouse_xt)    
    {

        for(var _y=0;_y<= old_height;_y=_y+mouse_yt)   
        {

            old_values[counter_i,counter_j]={x:_x,y:_y};
            counter_j+=1;
        }
        counter_j=0;
        counter_i+=1
    }
    console.log(old_values);
    var start_x=0;
    var start_y=0;
    for(var __x=0;__x<= piece_x;__x=__x+1) 
    {

        for(var __y=0;__y<= piece_y;__y=__y+1)
        {

            elle.drawImage(imageObj,old_values[__x,__y].x,old_values[__x,__y].y,mouse_xt,mouse_yt,start_x,start_y,mouse_xt,mouse_yt);
            start_y=start_y+mouse_yt+thickness;
        };
        start_y=0;
        start_x=start_x+mouse_xt+thickness;
    }
};

函数breakez（）
{
//还有更多要补充的，未完成
var first=0；
var piece_x=（单元格宽度%mouse_xt）；
var piece_y=（高度百分比鼠标_yt）；
var old_values=新数组；
var计数器i=0；
var计数器j=0；
对于（var x=0；x），下面是一个使用填充对图像进行切片的示例：

正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
$（“#测试”）.hide（）；
var行=5；
var-cols=5；
var=10；
var clipWidth，clipHeight；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var img=new Image（）；img.onload=start；img.src=“koolaidman.png”；
函数start（）{
clipWidth=img.width/cols；
clipHeight=img.高度/行数；
canvas.width=img.width+cols*填充；
canvas.height=img.height+行*填充；
ctx.drawImage（img，0,0）；
$（“#测试”）.show（）；
}
$（“#测试”）。单击（函数（）{
clearRect（0,0，canvas.width，canvas.height）；
对于（var y=0；y您能在问题中发布您的代码吗？@bjb568补充道。我之前假设任何超过一个小片段的内容在这里都不受欢迎。哇……是的，您应该找出问题所在的部分，然后只发布该部分。@bjb568完成。希望这能有所帮助。什么，具体是您遇到的错误？控制台中有什么内容吗？我查看了代码，它和我的非常相似，唯一的区别是在我的版本中，它每秒被调用60次。。。
<!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(){

    $("#test").hide();

    var rows=5;
    var cols=5;
    var padding=10;
    var clipWidth,clipHeight;

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

    var img=new Image();img.onload=start;img.src="koolaidman.png";
    function start(){

        clipWidth=img.width/cols;
        clipHeight=img.height/rows;

        canvas.width=img.width+cols*padding;
        canvas.height=img.height+rows*padding;

        ctx.drawImage(img,0,0);

        $("#test").show();
    }


    $("#test").click(function(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var y=0;y<5;y++){
        for(var x=0;x<5;x++){
            ctx.drawImage(img,
                x*clipWidth,y*clipHeight,clipWidth,clipHeight,
                (clipWidth+padding)*x,(clipHeight+padding)*y,clipWidth,clipHeight
            );
        }}
    });


}); // end $(function(){});
</script>
</head>
<body>
    <button id="test">Slice the Image</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>