<canvas> crossbrowser - IE </canvas>

Question

如何使用jCanvas

创建一个有效的crossbrowser脚本

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

希望有所帮助。

-Caleb