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
巴特西

Demo of canvas, canvas optimization and svg

最新文章

热门文章
