B/S的画板功能的实现的部分javascript

// JScript ファイル
//  Global変数
var Zahyo = new Array();    // 座標のワーク(フラグ(1:始点,0:終点)、X座標、Y座標)
var Cnt = 0;                // 座標のワークの数
          
// 座標用ワークにパラメータの内容を追加する
function SavePos(Flg,XPos,YPos,_lineWidth,_lineColor)
{
    var wrk ;
    var FilePath ;
    var ForReading = 1; //読み込み
    var ForWriting = 2; //書きこみ（上書きモード）
    var ForAppending = 8; //書きこみ（追記モード）
    var objFileSys;
    var objOutFile;
   
    // パラメータを連結
    wrk = ""+Flg + "," + ""+XPos + "," + ""+YPos +"," + ""+_lineWidth+"," + ""+_lineColor
 
    //ファイルシステムオブジェクトの作成
    objFileSys = new ActiveXObject("Scripting.FileSystemObject");

    //テキストファイルに追記。無ければ作成する
      FilePath = "C://temp"
    if (objFileSys.FolderExists(FilePath)==false ){    
          objOutFile = objFileSys.CreateFolder(FilePath)
    };   
    FilePath = "C://temp//testPos.txt"
    if (objFileSys.FileExists(FilePath)==true){
        objOutFile = objFileSys.OpenTextFile(FilePath, ForAppending)
       
    }else{           
        objOutFile = objFileSys.CreateTextFile(FilePath,true)
    };

    //テキストファイルへの書き込み（1行書き込み）
    objOutFile.WriteLine(wrk);
    //テキストファイルのクローズ
    objOutFile.Close();
    //オブジェクト破棄
    objFileSys = null;
    objOutFile = null;  
}
 // DrawingCanvas.js
// VML Backend
function DrawingCanvasVML(parent, width, height)
{
  if (!document.namespaces) throw new Error("Not supported!");
  if (!document.namespaces.v) {
    document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
    document.createStyleSheet().addRule("v//:*",
                                        "behavior: url(#default#VML);");
  }
  if (!parent) throw new Error("No canvas parent!");

  if (!width)  width  = parent.clientWidth;
  if (!height) height = parent.clientHeight;

  this.parent        = parent;
  this.width         = width;
  this.height        = height;
  this._bgColor      = "none";
  this._lineWidth    = 2;
  this._lineColor    = "#000";
  this._isDrawing    = false;
  this._currentShape = null;
  this._dummyDot     = null;
  this._points       = "";
  this._stack        = [];
  this._stackTop     = -1;
  this._dotX         = 0;
  this._dotY         = 0;
  var container = document.createElement("div");
  container.style.cssText = "position: relative; " +
                            "width: "  + width  + "px; " +
                            "height: " + height + "px; " +
                           "cursor: crosshair;"+
                            "overflow: hidden; ";
                                                  
  parent.appendChild(container);
  this.container = container;
}

DrawingCanvasVML.prototype = {
  setBgColor: function (color) {
    this.container.style.backgroundColor = this._bgColor = color;
  },

  setLineColor: function (color) {
    this._lineColor = color; 
  },

  setLineWidth: function (width) {
    this._lineWidth = width; 
  },
  setDot:function(x,y){
  this._dotX=x;
  this._dotY=y;
  },
 
  //円
  startCircle: function(x,y){   
        var x0=this._dotX;
        var y0=this._dotY;
        var radius=Math.sqrt((x0-x)*(x0-x)+(y0-y)*(y0-y))/2.0;
        var a=Math.abs ((x0-x)/2);
        var b=Math.abs ((y0-y)/2);
        x0=(x0+x)/2.0;
        y0=(y0+y)/2.0;

        var rs =new Array();
        var tmpar=new Array();
        var startAngle=0;
        var EndAngle=360;

        startAngle = startAngle/360*Math.PI*2;
        EndAngle = EndAngle/360*Math.PI*2;
        for (var I=startAngle;I<EndAngle;I+=(1/radius))
        {
        if (I==startAngle ){
        var dx = Math.sin(I)*a+x0;
        var dy = Math.cos(I)*b+y0;
        this.startLine(dx,dy,"1");
        }else
        {
        var dx = Math.sin(I)*a+x0;
        var dy = Math.cos(I)*b+y0;
        this.lineTo(dx,dy);
        }
        } 
   },
  startLine: function (x, y, k) {
    //
        SavePos(k,x,y,this._lineWidth,this._lineColor);
    if (this._isDrawing)
      this.endLine();
    this._isDrawing = true;

    var dot  = document.createElement("v:oval");
    var size = this._lineWidth;
    dot.fillcolor     = this._lineColor;
    dot.strokecolor   = this._lineColor;
    dot.style.cssText = "position: absolute; " +
                        "width: "  + size + "px; " +
                        "height: " + size + "px; " +
                        "left: " + (x - size / 2) + "px; " +
                        "top: "  + (y - size / 2) + "px; ";
    this.container.appendChild(dot);

    this._dummyDot = dot;
    this._points   = x + "," + y;
    this._dotX         = x;
    this._dotY         = y;
    var polyline = document.createElement("v:polyline");
    polyline.filled       = false;
    polyline.strokecolor  = this._lineColor;
  
      var hdnKakudai_Shukushou=document.getElementById("hdnKakudai_Shukushou");
         
            
    polyline.strokeweight = this._lineWidth * hdnKakudai_Shukushou.value;
    polyline.points       = this._points;
     
    var stroke = document.createElement("v:stroke");
    stroke.endcap = "round";
    polyline.appendChild(stroke);
    this.container.appendChild(polyline);
    this._currentShape = polyline;
  },

  endLine: function () {
    if (!this._isDrawing) return;

    if (this._dummyDot) {
      this.container.removeChild(this._currentShape);
      this._pushStack(this._dummyDot);
      this._dummyDot = null;
    } else {
      this._pushStack(this._currentShape);
    }
    this._isDrawing    = false;
    this._currentShape = null;
    this._points       = "";
  },
//線
  lineTo: function (x, y) {
    //
        SavePos("0",x,y,this._lineWidth ,this._lineColor );
     
    if (!this._isDrawing) return;
    if (this._dummyDot) {
      this.container.removeChild(this._dummyDot);
      this._dummyDot = null;
    }
    this._points +=  " " + x + "," + y;
    this._currentShape.points.value = this._points;
 
  }, 
  //矢印
 Arrow:function(x,y){
      var x1=this._dotX;
      var y1=this._dotY;
      this.lineTo(x,y);
      this.endLine();
      this.startLine(x,y,"2");
      var pi=3.1415926;
      var t=pi/4;
      var l=0.2;
      var x2;
      var y2;      
      var d =Math.sqrt ((x-x1)*(x-x1)+(y-y1)*(y-y1));
      if (d>0.0000001){
       var xa=x+10*((x1-x)+(y1-y)/2)/d;
       var ya=y+10*((y1-y)-(x1-x)/2)/d;
        this.lineTo(xa,ya);
        this.endLine();
        this.startLine(x,y,"2");
        var xb=x+10*((x1-x)-(y1-y)/2)/d;
        var yb=y+10*((y1-y)+(x1-x)/2)/d;
        this.lineTo(xb,yb);
        this.endLine();
       }    
 },
    //四角を書く
 Rect: function(x,y){
           var x1=this._dotX;
           var y1=this._dotY;
           this.lineTo(x1,y);  
           this.lineTo(x,y);
           this.lineTo(x,y1);
           this.lineTo(x1,y1);     
   },
 
  undo: function () {
    if (this._isDrawing)
      this.endLine();
    if (this._stackTop < 0)
      return false;

    this._stack[this._stackTop--].style.visibility = "hidden";
    return true;
  },

  redo: function () {
    if (this._isDrawing)
      this.endLine();
    if (this._stackTop >= this._stack.length - 1)
      return false;

    this._stack[++this._stackTop].style.visibility = "visible";
    return true;
  },

  clear: function () {
    if (this._isDrawing)
      this.endLine();

    for (var i = this._stack.length; i--;)
      this.container.removeChild(this._stack[i]);
    this._stack.length = 0;
    this._stackTop     = -1;
  },

  _htmlIsRoot: (typeof document.compatMode == "string") &&
               (document.compatMode == "CSS1Compat"),

  getX: function () {
    var box = this.container;
    var x   = box.offsetLeft;
    while ((box = box.offsetParent))
      x += box.offsetLeft;
      x += (this._htmlIsRoot ? document.documentElement
                           : document.body).clientLeft;
    return x;
  },

  getY: function () {
    var box = this.container;
    var y   = box.offsetTop;
    while ((box = box.offsetParent))
      y += box.offsetTop;
      y += (this._htmlIsRoot ? document.documentElement
                           : document.body).clientTop;
    return y;
  },

  _pushStack: function (shape) {
    var stackLength = this._stack.length;
    if (++this._stackTop < stackLength) {
      for (var i = this._stackTop; i < stackLength; i++)
        this.container.removeChild(this._stack[i]);
      this._stack.length = this._stackTop + 1;
    }
    this._stack[this._stackTop] = shape;
  }
};

function DrawingCanvas()
{
  var backend = "CSSP";
  if (document.namespaces && document.namespaces.add)
    backend = "VML";
  try {
    if (document.createElement("canvas").getContext)
      backend = "Canvas";
  } catch (e) {}
  if (document.createElementNS) {
    if (document.implementation.hasFeature("org.w3c.svg", null))
      backend = "SVGT";
    if (window.opera) {
      var ua    = navigator.userAgent;
      var index = ua.indexOf("Opera");
      if (index >= 0 && parseInt(ua.substring(index + 6)) >= 8)
        backend = "SVGT";
    }
  }

  switch (backend) {
    case "SVGT":   DrawingCanvas = DrawingCanvasSVGT;   break;
    case "Canvas": DrawingCanvas = DrawingCanvasCanvas; break;
    case "CSSP":   DrawingCanvas = DrawingCanvasCSSP;   break;
    case "VML":    DrawingCanvas = DrawingCanvasVML;    break;
  }
  DrawingCanvas.backend = backend;
  DrawingCanvas.prototype.constructor = DrawingCanvas;
}
DrawingCanvas();

//DynamicCanvas.js
function DynamicCanvas()
{
  var htmlStyle   = document.documentElement.getAttribute("style");
  var useDOMEvent = (htmlStyle === null) || (typeof htmlStyle != "object");
  var Self;

  if (useDOMEvent) {
   } else {
 
    Self = function () {
      DrawingCanvas.apply(this, arguments);

      var self     = this;
    
      var viewRoot = (document.compatMode &&
                       document.compatMode == "CSS1Compat")
                     ? document.documentElement : document.body;   
                    
      var MousDownflag =0;
      var onMouseDown = function () {
            MousDownflag =1;
           var hdnErase=document.getElementById("hdnErase");
           if (hdnErase.value=="0"){
           var hdnColor=document.getElementById("hdnColor");
                  self.setLineColor( hdnColor.value);                                       
                                           
           var hdnSenhaba=document.getElementById("hdnSenhaba");
             self.setLineWidth(hdnSenhaba.value);
           }else{
            self.setLineColor("#FFFFFF");
            self.setLineWidth(6);
            }
            var hdnPattern=document.getElementById("hdnPattern");
             //円
                 if (hdnPattern.value=="Circle"){
                  self.x = self.getX();
                  self.y = self.getY();
                  self.setDot(event.clientX + viewRoot.scrollLeft - self.x,
                              event.clientY + viewRoot.scrollTop  - self.y);
                 }else{
                     self.x = self.getX();
                     self.y = self.getY();
                     self.startLine(event.clientX + viewRoot.scrollLeft - self.x,
                                    event.clientY + viewRoot.scrollTop  - self.y,"1");
                     }
      
      };
       var onMouseMove = function () {
            var hdnPattern=document.getElementById("hdnPattern");
             var hdnErase=document.getElementById("hdnErase");
             if (MousDownflag ==1){
                if (hdnPattern.value=="" | hdnErase.value=="1")
                {
                    self.x = self.getX();
                    self.y = self.getY();
                    self.lineTo(event.clientX + viewRoot.scrollLeft - self.x,
                                event.clientY + viewRoot.scrollTop  - self.y);               
                }
            }
      };
      var onMouseUp = function () {       
         var hdnPattern=document.getElementById("hdnPattern");
          var hdnErase=document.getElementById("hdnErase");
         MousDownflag =0;
        //フリー描画 || 線を引く
           if (hdnPattern.value==""| hdnPattern.value=="line" | hdnErase.value=="1") {
             self.x = self.getX();
             self.y = self.getY();
             self.lineTo(event.clientX + viewRoot.scrollLeft - self.x,
                          event.clientY + viewRoot.scrollTop  - self.y);
             self.endLine();
           }         
           
            if (hdnErase.value=="0"){
                 //四角を書く
                 if (hdnPattern.value=="Square"){
                 self.x = self.getX();
                 self.y = self.getY();
                 self.Rect(event.clientX + viewRoot.scrollLeft - self.x,
                             event.clientY + viewRoot.scrollTop  - self.y);
                 self.endLine();
                }
                //円
                 if (hdnPattern.value=="Circle"){
                    self.x = self.getX();
                    self.y = self.getY();
                   self.startCircle(event.clientX + viewRoot.scrollLeft - self.x,
                                    event.clientY + viewRoot.scrollTop  - self.y);
                   self.endLine();
                    }
                       //arrow矢印
                  if (hdnPattern.value=="arrow"){
                     self.x = self.getX();
                     self.y = self.getY();
                     self.Arrow(event.clientX + viewRoot.scrollLeft - self.x,
                                 event.clientY + viewRoot.scrollTop  - self.y);
                   }      
                }              
         }; 
     
      var onSelectStart = function () { return false; };

      this.container.attachEvent("onmousedown",   onMouseDown);
      this.container.attachEvent("onmousemove",     onMouseMove);
      this.container.attachEvent("onmouseup",     onMouseUp);
      this.container.attachEvent("onselectstart", onSelectStart);
      Self._listeners.push({
        target:        this.container,
        onMouseDown:   onMouseDown,
        onMouseMove:   onMouseMove,
        onMouseUp:     onMouseUp,
        onSelectStart: onSelectStart   
      });
    };
    Self._listeners = [];
    Self._onUnload = function () {
      for (var i = Self._listeners.length; i--;) {
        var listener = Self._listeners[i];
        listener.target.detachEvent("onmousedown",   listener.onMouseDown);
        listener.target.detachEvent("onmousemove",     listener.onMouseMove);
       listener.target.detachEvent("onmouseup",     listener.onMouseUp);
        listener.target.detachEvent("onselectstart", listener.onSelectStart);
      }
      window.detachEvent("onunload", Self._onUnload);
    };
    window.attachEvent("onunload", Self._onUnload);
  }

  var Proto = function () {};
  Proto.prototype = DrawingCanvas.prototype;
  Self.prototype  = new Proto();
  Self.prototype.constructor = Self;
  Self.backend    = DrawingCanvas.backend;
  DynamicCanvas   = Self;
}
DynamicCanvas();

//色変更
function DownColor(strColor)
{
    var hdnColor = document.getElementById("hdnColor");
    hdnColor.value=strColor;
}
//シェーマ一覧 Image Click
function ClicktblSheMaItiran(intRowCell)
{
    var hdnTable_row_cell = document.getElementById("hdnTable_row_cell");
    hdnTable_row_cell.value=(intRowCell);

}
//画面初期化
 function OnLoadPage()
 {
      var canvas = new DynamicCanvas(document.getElementById("canvasParent")); 
                    canvas.setLineColor(document.getElementById("hdnColor").value);
                    canvas.setLineWidth(document.getElementById("hdnSenhaba").value);
 }