1

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'));
4

1 に答える 1

2

excanvasはすべてをサポートしているわけではないので、実際にはFlashCanvasを使用することをお勧めします。excanvasよりも機能する可能性が高いようです（excanvasは私のために機能しなかったため）。

「間違った」座標に関して、jCanvasはデフォルトで（左上隅ではなく）形状の中心にある（x、y）座標を考慮します。fromCenterプロパティを（オブジェクトで）falseに設定することで、この動作を簡単にオーバーライドできます。

お役に立てば幸いです。

-カレブ

于 2011-12-21T05:24:55.763 に答える