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);
        }