Demo of canvas, canvas optimization and svg

It used the canvas to draw the curves in the old project, and the client felt that it was vague, so I tried to make a demo about canvas, canvas optimization and svg comparison.

The effect is as follows:

<!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body style="display: flex;
    align-items: center;
    justify-content: space-around;">
    <div>
        <div style="    text-align: center;
    font-family: cursive;">正常 Canvas</div>
        <div style="background-color:cornflowerblue;width:200px;height:200px;">
            <canvas id="normalCanvas" width="200" height="200" />
        </div>
    </div>
    <div>
        <div style="    text-align: center;
    font-family: cursive;">优化后 Canvas</div>
        <div style="background-color:cornflowerblue;width:200px;height:200px;">
            <canvas id="optimizedCanvas" style="width:200px;height:200px" width="400" height="400" />
        </div>
    </div>
    <div>
        <div style="    text-align: center;
    font-family: cursive;">Svg</div>
        <div id="svgDiv" style="background-color:cornflowerblue;width:200px;height:200px;">
            <svg style="width:100%;height:100%;">
                <circle cx="30" cy="50" r="25" />
            </svg>
        </div>
    </div>
</body>
<script>
    drawNormalCanvas();
    drawOptimizedCanvas();
    drawSvg();

    function drawNormalCanvas() {
        let canvas = document.getElementById("normalCanvas");
        let context = canvas.getContext('2d');
        let centerX = canvas.width / 2;
        let centerY = canvas.height / 2;
        let rad = Math.PI * 2 / 100;
        let endNum = 0.5 * 100;
        let scale = 1;

        context.imageSmoothingEnabled = true;

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.save();
        context.strokeStyle = "#53FFFF"; //设置描边样式
        context.lineWidth = 4 * scale; //设置线宽
        context.beginPath(); //路径开始
        context.arc(centerX, centerY, 75 * scale, -Math.PI / 2, -Math.PI / 2 + endNum * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context.stroke(); //绘制
        context.closePath(); //路径结束
        context.restore();
        context.save();
        context.beginPath();
        context.strokeStyle = "white";
        context.lineWidth = 2 * scale;
        context.arc(centerX, centerY, 75 * scale, 0, Math.PI * 2, false);
        context.stroke();
        context.closePath();
        context.restore();
        context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context.strokeStyle = "#fff"; //设置描边样式
        //绘制字体，并且指定位置
        context.fillStyle = "#fff";
        context.font = "normal normal lighter 12px Microsoft YaHei"; //设置字体大小和字体
        context.fillText("击败了全部用户", centerX - 40 * scale, centerY - 20 * scale);
        context.font = "normal normal normal 30px arial";
        context.fillText(endNum.toFixed(0) + "%", centerX - 23 * scale, centerY + 15 * scale);
        context.font = "normal normal lighter 14px Microsoft YaHei"; //设置字体大小和字体
        context.fillText('中级' + '', centerX - 15 * scale, centerY + 40 * scale);
        context.stroke(); //执行绘制
        context.restore();
    }

    function drawOptimizedCanvas() {
        let canvas = document.getElementById("optimizedCanvas");
        let context = canvas.getContext('2d');
        let centerX = canvas.width / 2;
        let centerY = canvas.height / 2;
        let rad = Math.PI * 2 / 100;
        let endNum = 0.5 * 100;
        let scale = 2;

        context.imageSmoothingEnabled = true;

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.save();
        context.strokeStyle = "#53FFFF"; //设置描边样式
        context.lineWidth = 4 * scale; //设置线宽
        context.beginPath(); //路径开始
        context.arc(centerX, centerY, 75 * scale, -Math.PI / 2, -Math.PI / 2 + endNum * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context.stroke(); //绘制
        context.closePath(); //路径结束
        context.restore();
        context.save();
        context.beginPath();
        context.strokeStyle = "white";
        context.lineWidth = 2 * scale;
        context.arc(centerX, centerY, 75 * scale, 0, Math.PI * 2, false);
        context.stroke();
        context.closePath();
        context.restore();
        context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context.strokeStyle = "#fff"; //设置描边样式
        //绘制字体，并且指定位置
        context.fillStyle = "#fff";
        context.font = "normal normal lighter 24px Microsoft YaHei"; //设置字体大小和字体
        context.fillText("击败了全部用户", centerX - 40 * scale, centerY - 20 * scale);
        context.font = "normal normal normal 60px arial";
        context.fillText(endNum.toFixed(0) + "%", centerX - 23 * scale, centerY + 15 * scale);
        context.font = "normal normal lighter 28px Microsoft YaHei"; //设置字体大小和字体
        context.fillText('中级' + '', centerX - 15 * scale, centerY + 40 * scale);
        context.stroke(); //执行绘制
        context.restore();
    }

    function drawSvg() {
        let svgDiv = document.getElementById("svgDiv");
        let centerX = svgDiv.offsetWidth / 2;
        let centerY = svgDiv.offsetHeight / 2;
        let newHtml = `<svg style="width:100%;height:100%;">
<circle cx="${centerX}"  cy="${centerY}" r="75" style="fill:none;stroke:white;stroke-width: 2px" />
<path d="M 100 25 A 75 75 0 1 1 100 175" stroke="#53FFFF" stroke-width="4px" fill="none" />
<text x="${centerX - 40}" y="${centerY - 20}" style="fill: #fff;font:normal normal lighter 12px Microsoft YaHei;">击败了全部用户</text>
<text x="${centerX - 23}" y="${centerY + 15}" style="fill: #fff;font:normal normal normal 30px arial;">50%</text>
<text x="${centerX - 15}" y="${centerY + 40}" style="fill: #fff;font:normal normal lighter 12px Microsoft YaHei;">中级</text>
</svg>
    `;
        svgDiv.innerHTML = newHtml;
    }
</script>

</html>

references：

https://echarts.apache.org/handbook/zh/best-practices/canvas-vs-svg/#

https://www.cnblogs.com/fireyjy/p/5789376.html

https://www.cnblogs.com/heibaiqi/p/16547624.html