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的更多相关文章

HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
FireFox下Canvas使用图像合成绘制SVG的Bug
本文适合适合对canvas绘制.图形学.前端可视化感兴趣的读者阅读. 楔子所有的事情都会有一个起因.最近产品上需要做一个这样的功能:给一些图形进行染色处理.想想这还不是顺手拈来的事情,早就研究过图形 ...
做出一个SwitchButton的效果，并详细学习一下onDraw(Canvas canvas)方法的使用
代码的灵感和原理主要来自于android自定义开关控件-SlideSwitch http://blog.csdn.net/singwhatiwanna/article/details/9254309这 ...
Html5新增元素中Canvas 与内联SVG的比较！
SVG与Canvas的区别与比较如下: svg:使用xml描述2D图形,canvas使用javascript描述2D图形. Canvas 是逐像素进行渲染的,在 canvas 中,一旦图形被绘制完成, ...
把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)
把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...
HTML5 学习总结（四）——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
canvas绘图、WebGL、SVG
目录一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画二.WebGL 2.1.HTML ...
HTML5 学习笔记（四）——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
svg转化成canvas以便生成base64位的图片
很久前写了关于把html转成图片的一个例子,最近有出了新的问题.利用html2canvas.js文件把html转成base64位的图片是没什么问题的,但也不是绝对的,比如这时候不能碰见svg这个鬼,h ...

随机推荐

spring boot 配置Bean
package com.example.demo.config; import com.example.demo.entiy.User; import org.springframework.cont ...
Classical Cipher
[NPUCTF2020]Classical Cipher 难得做到一道古典密码的题目,打开后有一个flag.zip和一个提示. 解密后的flag请用flag{}包裹压缩包密码:gsv_pvb_rh_ ...
鉄道旅行 (Railroad Trip)
题意有 \(n\) 个城市, \(n-1\) 条道路.其中第 \(i\) 个城市和第 \(i+1\) 个城市由第 \(i\) 条道路连接.通过一条道路有两种付费方式:每次支付费用 \(a_i\) , ...
Educational Codeforces Round 137 (Rated for Div. 2) - D. Problem with Random Tests
期望 + 暴力 [Problem - D - Codeforces](https://codeforces.com/contest/1743/problem/E) 题意给出一个长度为 \(n\;(1 ...
lg7335 [JRKSJ R1] 异或题解
本题的标签中含有trie,但是这道题可以不用trie做. 考虑列出本题的dp方程:设\(f_{k,i}\)表示前\(i\)个数选了\(k\)段的答案,\(s_i\)为数组的前缀异或和当不选择第\(i ...
python数据方面的文章
excel 对接 jupyter https://mp.weixin.qq.com/s/NTCIOs_Yz3MIRgT8S36yGQ pandas 常用分拆数据 https: ...
pycharm界面背景色设置
1. 打开Pycharm点击左上角File,然后选择找到Settings点击进入->搜索Appearance -> 选择Appearance->Background Image 选 ...
git -----已经被跟踪文件如何在本地提交时忽略
git update-index --assume-unchanged C.md 注:忽略后将不再拉取和提交c.md这个文件 git update-index --no-assume-unchange ...
yum源更换为阿里云源
#首先备份/etc/yum.repos.d/CentOS-Base.repocp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-B ...
@Async 注解的使用
1.@Async介绍在Spring中,基于@Async标注的方法,称之为异步方法:这些方法将在执行的时候,将会在独立的线程中被执行,调用者无需等待它的完成,即可继续其他的操作例如, 在某个调用中, ...

Demo of canvas, canvas optimization and svg

Demo of canvas, canvas optimization and svg的更多相关文章

随机推荐

热门专题