日期:2014-05-16  浏览次数:20465 次

求助,canvas应用的扩展,悬赏100分
是这样的,我要用canvas做一个选座应用,现在canvas里面绘制了很多矩形代表座位,可以点击选择,根据选择的坐标而重绘canvas。现在我自己已经完成了基本功能,但是短板是画布放大后,坐标就失效了,无法正确点击选择了,请问应该怎么修改?最好可以写个demo,我的代码如下,直接在上面修改就好了。

<!DOCTYPE html>  
<html>  
<head>  

<title> Canvas Demo</title>  
<!--[if It IE]>  
 <script type="text/javascript" src="./excanvas.js"></script>  
<![endif]-->  
<script>  
//初始化  
window.onload=function() {   
    var canvas = document.getElementById('cvs');   
    if (canvas.getContext){   
        var ctx = canvas.getContext('2d');   
          
        ctx.fillStyle='blue';

    //    -----------------------------
         
        ctx.beginPath();   
        ctx.rect(10,10,50,50);   
        ctx.fill();  
         
        ctx.beginPath();   
        ctx.rect(70,10,50,50);   
        ctx.fill();  
                 
        ctx.beginPath();   
        ctx.rect(130,10,50,50);   
        ctx.fill();
         
        ctx.beginPath();   
        ctx.rect(190,10,50,50);   
        ctx.fill();
         
        ctx.beginPath();   
        ctx.rect(250,10,50,50);   
        ctx.fill();
         
        ctx.beginPath();   
        ctx.rect(310,10,50,50);   
        ctx.fill();
     
    //----------------------------------------      
  //----------------------------------------   
        //line2    
        ctx.beginPath(); 
    ctx.rect(10,70,50,50);   
        ctx.fill();  

ctx.beginPath(); 
    ctx.rect(70,70,50,50);   
        ctx.fill(); 

ctx.beginPath(); 
    ctx.rect(130,70,50,50);