求助 js canvas 错误怎么改了

c_by=document.getElementById("canvas_by");
cxt_by=c_by.getContext("2d");
canvas_w=c_by.width/cols;//// 单个方块大
var tmp_cx=0;
var tmp_cy=0;
var num="";
for(var i=1 ;i <= rows*cols; i++){
//显示数字
if(num_txt==1){
num='<span class="pc_num">'+i+'</span> '
}
//边框生成
var c_t=tmp_cy*canvas_w;
var c_l=tmp_cx*canvas_w;
var pc_html='<div class="pc" id="pc_"'+i+' style="top: '+c_t+'px; left: '+ c_l +'px" >'+num+'<canvas id="canvas_'+i+'" width="'+canvas_w+'" height="'+canvas_w+'"></canvas></div>'
$(".pt").append(pc_html);
$(".pc").css({"width":canvas_w,"height":canvas_w})
//填入小canvas
var c ,cxt ="";
c=document.getElementById("canvas_"+i);
cxt=c.getContext("2d");
//alert(c_t+'_'+c_l+'_'+(c_t+canvas_w)+'_'+(c_l+canvas_w))
//cxt.drawImage(c_by,0,0,200,200,0,0,canvas_w,canvas_w) 直接为数字可以得到正确结果
cxt.drawImage(c_by,c_t,c_l,c_t+canvas_w,c_l+canvas_w,0,0,canvas_w,canvas_w)//这样就错了
//行数列数计算
if(tmp_cx<cols-1){
tmp_cx++;
}else{
tmp_cx=0;
tmp_cy++;
}
}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

楼主，好好看看c_t+canvas_w,c_l+canvas_w这两个值最后是不是数字，并且是不是都小于或者等于你的canvas画布的大小啊我个人觉得应该是这两个值出现了问题
这是学着写滑动拼图一部份片段，目的是把图片分成数个小块
to:2#
c_t+canvas_w,c_l+canvas_w alert测试的结果是正确的
目的达到！只是换个思数
但错误这种写法原因未明，大家研究研究
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width">
      <title>无标题文档</title>
      <link rel="stylesheet" type="text/css" href="puzzle.css">
    </head>
    <body>
      <div class="warp loading">
        <img src="dimetrodon.jpg" id="imga" width="43" height="43">
        <div class=" pt " style="width: 537px; height: 716px">
          <div class="img_by" id="img_by" style="display: none">
            <canvas id="canvas_by" width="537" height="716"></canvas>
          </div>
          <div class="pc" id="pc_1" style="top: 0px; left: 0px; width: 179px; height: 179px">
            <span class="pc_num">1</span>
            <canvas class="pc_cv" id="canvas_1" width="179" height="179"></canvas>
          </div>
          <div class="pc" id="pc_2" style="top: 0px; left: 179px; width: 179px; height: 179px">
            <span class="pc_num">2</span>
            <canvas class="pc_cv" id="canvas_2" width="179" height="179"></canvas>
          </div>
          <div class="pc" id="pc_3" style="top: 0px; left: 358px; width: 179px; height: 179px">
            <span class="pc_num">3</span>
            <canvas class="pc_cv" id="canvas_3" width="179" height="179"></canvas>
          </div>
          <div class="pc" id="pc_4" style="top: 179px; left: 0px; width: 179px; height: 179px">
            <span class="pc_num">4</span>
            <canvas class="pc_cv" id="canvas_4" width="179" height="179"></canvas>
          </div>
          <div class="pc" id="pc_5" style="top: 179px; left: 179px; width: 179px; height: 179px">
            <span class="pc_num">5</span>
            <canvas class="pc_cv" id="canvas_5" width="179" height="179"></canvas>
          </div>
          <div class="pc" id="pc_6" style="top: 179px; left: 358px; width: 179px; height: 179px">
            <span class="pc_num">6</span>
            <canvas class="pc_cv" id="canvas_6" width="179" height="179"></canvas>
          </div>
          <div class="pc" id="pc_7" style="top: 358px; left: 0px; width: 179px; height: 179px">
            <span class="pc_num">7</span>
            <canvas class="pc_cv" id="canvas_7" width="179" height="179"></canvas>
          </div>
          <div class="pc" id="pc_8" style="top: 358px; left: 179px; width: 179px; height: 179px">
            <span class="pc_num">8</span>
            <canvas class="pc_cv" id="canvas_8" width="179" height="179"></canvas>
          </div>
          <div class="pc" id="pc_9" style="top: 358px; left: 358px; width: 179px; height: 179px">
            <span class="pc_num">9</span>
            <canvas class="pc_cv" id="canvas_9" width="179" height="179"></canvas>
          </div>
          <div class="pc" id="pc_10" style="top: 537px; left: 0px; width: 179px; height: 179px">
            <span class="pc_num">10</span>
            <canvas class="pc_cv" id="canvas_10" width="179" height="179"></canvas>
          </div>
          <div class="pc" id="pc_11" style="top: 537px; left: 179px; width: 179px; height: 179px">
            <span class="pc_num">11</span>
            <canvas class="pc_cv" id="canvas_11" width="179" height="179"></canvas>
          </div>
          <div class="pc" id="pc_12" style="top: 537px; left: 358px; width: 179px; height: 179px">
            <span class="pc_num">12</span>
            <canvas class="pc_cv" id="canvas_12" width="179" height="179"></canvas>
          </div>
        </div>
      </div>
            <script type="text/javascript">
var rows= 4;
var cols= 3;
var img = new Image();
img.src='http://img.article.pchome.net/00/36/31/35/2.jpg';

img.onload = function ()
        {
var tmp_cx=0;
var tmp_cy=0;
var canvas_w=200;
var num="";
for(var i=1 ;i <= rows*cols; i++){
var c_t=tmp_cy*canvas_w;
var c_l=tmp_cx*canvas_w;
//填入小canvas
var c ,cxt ="";
c=document.getElementById("canvas_"+i);
cxt=c.getContext("2d");
//cxt.drawImage(img,0,0,200,200,0,0,canvas_w,canvas_w) //直接为数字可以得到正确结果
cxt.drawImage(img,c_t,c_l,c_t+canvas_w,c_l+canvas_w,0,0,canvas_w,canvas_w)//这样就错了

//行数列数计算
if(tmp_cx<cols-1){
tmp_cx++;
}else{
tmp_cx=0;
tmp_cy++;
}
}
}
</script>
    </body>
  </html>