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:
View Code
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/#
posted on 2022-12-16 11:03 thegavincheng 阅读(9) 评论(0) 编辑 收藏 举报
