jquery - 跨浏览器 - IE

Question

如何使用 jCanvas 制作一个有效的跨浏览器脚本

• 在 IE8 中，画布未附加..
• 在 FF 和 Chrome 中，绘制的框架没有定位在正确的坐标上？起点在视口之外？！

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（在您的对象中）轻松覆盖此行为。

希望有帮助。

-迦勒