Web 版 powerdesigner (Canvas) 技術分享

　　演示地址：http://www.netuml.com:8088

 

　　 <canvas></canvas>是HTML5出現的新標籤，像全部的dom對象同樣它有本身自己的屬性、方法和事件，其中就有繪圖的方法，js可以調用它來進行繪圖.

　　繪製矩形  context.fillRect(x,y,width,height)  strokeRect(x,y,width,height)

     x:矩形起點橫座標（座標原點爲canvas的左上角，固然確切的來講是原始原點，後面寫到變形的時候你就懂了，如今暫時不用關係）

     y:矩形起點縱座標

     width:矩形長度

     height:矩形高度

function draw21(id) {
            var canvas = document.getElementById(id)
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            //實踐代表在不設施fillStyle下的默認fillStyle=black
            context.fillRect(0, 0, 100, 100);
            //實踐代表在不設施strokeStyle下的默認strokeStyle=black
            context.strokeRect(120, 0, 100, 100);

            //設置純色
            context.fillStyle = "red";
            context.strokeStyle = "blue";
            context.fillRect(0, 120, 100, 100);
            context.strokeRect(120, 120, 100, 100);

            //設置透明度實踐證實透明度值>0,<1值越低，越透明，值>=1時爲純色，值<=0時爲徹底透明
            context.fillStyle = "rgba(255,0,0,0.2)";
            context.strokeStyle = "rgba(255,0,0,0.2)";
            context.fillRect(240,0 , 100, 100);
            context.strokeRect(240, 120, 100, 100);
        }

　　清除矩形區域 context.clearRect(x,y,width,height)

 

  x:清除矩形起點橫座標

     y:清除矩形起點縱座標

     width:清除矩形長度

     height:清除矩形高度

 

function draw22(id) {
            var canvas = document.getElementById(id)
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            //實踐代表在不設施fillStyle下的默認fillStyle=black
            context.fillRect(0, 0, 100, 100);
            //實踐代表在不設施strokeStyle下的默認strokeStyle=black
            context.strokeRect(120, 0, 100, 100);

            //設置純色
            context.fillStyle = "red";
            context.strokeStyle = "blue";
            context.fillRect(0, 120, 100, 100);
            context.strokeRect(120, 120, 100, 100);

            //設置透明度實踐證實透明度值>0,<1值越低，越透明，值>=1時爲純色，值<=0時爲徹底透明
            context.fillStyle = "rgba(255,0,0,0.2)";
            context.strokeStyle = "rgba(255,0,0,0.2)";
            context.fillRect(240, 0, 100, 100);
            context.strokeRect(240, 120, 100, 100);
            context.clearRect(50, 50, 240, 120);
        }