Canvas線條末端平滑-12

html部分

        window.onload = function (params) {
            // 得到繪製源
            var c = document.getElementById('canvas');
            // 創建畫布，建立二維視角
            var ctx = c.getContext('2d');
            // 設置或返回線條的結束端點樣式。lineCap = butt（默認添加垂直邊緣）/round（添加圓形線帽）/square（正方形線帽）
            ctx.beginPath();
            ctx.lineCap="square";
            ctx.moveTo(20,10);
            ctx.lineTo(45,30);
            ctx.lineTo(70,10);
            ctx.lineTo(85,30);
            ctx.lineTo(45,80);
            ctx.lineTo(5,30);
            ctx.lineTo(20,10);
            ctx.fillStyle="cyan";
            ctx.fill();
            ctx.stroke();
        }