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