<canvas>跨瀏覽器 - IE

Question

如何使工作跨瀏覽器腳本jCanvas

• 在IE8畫布不追加..
• 在FF和Chrome描畫幀不位於右側COORDS？起點在視口之外？！

fsfiddle：

http://jsfiddle.net/4GSXC/

代碼：

<!--[if IE]><script src="http://secure.dynaccount.com/js/jquery/excanvas.min.js" type="text/javascript"></script><![endif]--> 
<script src="http://secure.dynaccount.com/js/jquery/jcanvas.5.0.min.js" type="text/javascript"></script> 

     function Canvas_overview(){ 
      var _this = this; 

      this.width = 900; 
      this.height = 360; 

      this.frm_x = 80; 
      this.frm_y = 30; 
      this.frm_width = 800; 
      this.frm_height = 280; 

      this.cnstr = function(elm){ 
       var canvas = $('<canvas width="'+this.width+'" height="'+this.height+'" style="border:1px solid black"></canvas>').appendTo(elm) 
        .drawRect({ 
         strokeStyle: '#969696', 
         strokeWidth: 1, 
         x: this.frm_x, 
         y: this.frm_y, 
         width: this.frm_width, 
         height: this.frm_height 
        }); 
      }; 
     } 

     var Canvas = new Canvas_overview(); 
     Canvas.cnstr($('body')); 

Answer 1

由於excanvas不支持一切，其實我建議使用FlashCanvas。這似乎比excanvas更有效（因爲excanvas從來沒有爲我工作過）。

關於「錯誤」座標，jCanvas默認（（而不是左上角））將形狀的中心座標（x，y）考慮在內。您可以輕鬆地通過將fromCenter屬性設置爲false（在您的對象中）來覆蓋此行爲。

希望有所幫助。

-Caleb