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:矩形起点纵坐标

     矩形长度

     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:清除矩形起点纵坐标

     清除矩形长度

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