canvas设置lineWidth属性，出现线条被fill覆盖问题。

一、问题发现

当我在用html5新元素<canvas>实现与sv

g同样的效果（画一个带5px轮廓线，宽为200，高为100的矩形）时，发现canvas画出的矩形与svg整体大小相同，但是轮廓线较窄。如下图：

二、原因

由图可知，靠近轮廓线的位置有一圈更深的颜色，这是原廓形线与填充颜色叠加的效果（原轮廓线为粉色，填充颜色为透明度为0.5的蓝色），可以知道此时的填充颜色在上方，轮廓线在下方，有一部分重叠改变了颜色。

三、解决问题

先填充颜色，后画轮廓线。JavaScript代码如下：

var b = document.getElementById("myCanvas2");
            var btx = b.getContext("2d");
            // 画矩形
            btx.rect(50,20,200,100);
            // 设置线宽为5px
            btx.lineWidth = "5";
            // 设置轮廓线颜色
            btx.strokeStyle = "rgba(255,192,203)";
            // 设置填充颜色
            btx.fillStyle = "rgba(0,0,255,0.5)";
            // 先填充颜色
            btx.fill();
            // 后画轮廓线
            btx.stroke();
            // 显示CANVAS文字
            btx.fillStyle = "white";
            btx.font = "16px Arial"
            btx.fillText("CANVAS",115,80);

修改后svg与canvas显示效果一致：