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 ...

随机推荐

SAP 登录文件路径
链接文件地址C:\Users\Administrator\AppData\Roaming\SAP\Common 复制:Common文件夹所有文件替换
【最新最新】mac pro 安装扩展imagick 最新总结
近期在mac上做相关开发,关于验证码图片如果没装imagick扩展会报 GD with FreeType or ImageMagick PHP extensions are required.等错误 ...
测开-面试题-Java基础
1 垃圾回收机制? 答: 一.手动垃圾回收机制(C/C++)手动:使用过的对象必须要程序员自己来回收缺点: 1.若程序员忘记及时回收--对象会一直在内存中,若程序运行时间很长,内存中存在大量垃圾,空 ...
VUE学习-过渡 & 动画
过渡 & 动画 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 在过渡钩子函数中使用 JavaScrip ...
windows运行xcopy计划任务结果是0x4解决方案
近几天发现一直好好的数据备份计划任务一直返回0x4失败,直接执行bat又是正常的. bat命令中使用的是xcopy,到处找方案没解决. 今天意外在使用另一个命令时,发现提示:网络连接数据超过最大值. ...
vue实现随机生成图形验证码
效果展示安装插件 npm i identify 定义组件 verificationCode.vue <template>  <div cla ...
新发现的几个不错的c++库
1.coost 包含了各种常用的库,比boost轻量级的基于c++11的库 https://github.com/idealvin/coost 2.ImGui 一个较少依赖的gui界面库 https: ...
085_JS Promise
js对undefined的处理 https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000 ...
redisTemplate类学习及理解
List<Object> list = masterRedisTemplate.executePipelined((RedisCallback<Long>) connectio ...
React自定义组件参数小驼峰命名提示警告 Warning: React does not recognize the `xxXxx` prop on a DOM element.
Warning: React does not recognize the `xxXxx` prop on a DOM element. If you intentionally want it to ...

Demo of canvas, canvas optimization and svg

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

随机推荐

热门专题