svg VS canvas,哪种在移动端适配度更好?实战经历告诉你~

已于 2022-11-19 18:37:51 修改
阅读量1k 收藏
点赞数 1
分类专栏： 前端 分享 文章标签： ui javascript 前端
于 2022-11-19 18:32:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44859233/article/details/127939869
版权

最近做了一个画图的功能,后端提供棋盘数据,前端需要把数据转换成一个棋盘画出来,当时有两种实现方法,一种是使用canvas画图,一个是使用svg画图.

ui提供的设计稿如下:

在这里插入图片描述

由于这是一个轮播图,当后端返回多少张棋盘数据时,就需要渲染多少张棋盘,最多有十张,基于canvas和svg画图,为了保证页面的首次渲染时长最优,就是不使用库来画,正好可以熟悉一下canvas和svg的基础.

svg画棋盘

适配

由于是在移动端的页面,所以首选就是使用rem单位,但是画着画着就出现了问题

svg画简单形状的代码是

<p>使用rem单位画线</p>
  <svg>
    <line
      x1="0"
      y1="0"
      x2="5rem"
      y2="5rem"
      stroke-width="2"
      stroke="#975B2A"
    />
  </svg>
  <p>使用rem单位画圆</p>
  <svg>
    <circle 
      cx="6rem" 
      cy="6rem" 
      fill="#A7632D" 
      r="0.3rem"
    ></circle>
  </svg>

效果如下:

在这里插入图片描述

在电脑上能够正常显示,但是到iphone13上,就显示不出来了.

我发现是小于1的rem单位的显示不出来,不过我没有使用各种各样的机型测试,但是iphone13就不行,那就只能放弃了.

所以就只能依赖js计算

40px的线条距离：40 * document.documentElement.clientWidth / 375;

虽然不能使用rem单位,但是可以使用百分比,使用svg的DOM元素使用rem单位还是没有问题的,使用百分比就能够正常显示

<p>使用百分比单位画线</p>
  <svg>
    <line
      x1="0"
      y1="0"
      x2="50%"
      y2="50%"
      stroke-width="2"
      stroke="#975B2A"
    />
  </svg>
  <p>使用百分比单位画圆</p>
  <svg>
    <circle 
      cx="60%" 
      cy="60%" 
      fill="#A7632D" 
      r="1%"
    ></circle>
  </svg>

在这里插入图片描述

不过使用js计算一次就可以了,百分比对着ui稿我还得计算一遍,所以我就直接使用document.documentElement.clientWidth计算了.

很快棋盘的样式就画好了

在这里插入图片描述

所以很快就被ui设计师打了回来,没有光泽,她说棋子需要画渐变,也需要有阴影,不然不好看.

加渐变

<p>加渐变(first:没渐变,second:有渐变)</p>
  <svg>
    <defs>
      <linearGradient id="b" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stop-color="#fff" stop-opacity="1"></stop>
          <stop offset="1" stop-color="#D0CBC7" stop-opacity="1"></stop>
      </linearGradient>
  </defs>
  <circle 
      cx="20%" 
      cy="60%" 
      fill="#fff" 
      r="3rem"
    ></circle>
    <circle 
      cx="60%" 
      cy="60%" 
      fill="url(#b)" 
      r="3rem"
    ></circle>
  </svg>
  <svg>
    <defs>
      <linearGradient id="a" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stop-color="#7B7B7B" stop-opacity="1"></stop>
          <stop offset="1" stop-color="#0B0B0B" stop-opacity="1"></stop>
      </linearGradient>
  </defs>
  <circle 
      cx="20%" 
      cy="60%" 
      fill="#000" 
      r="3rem"
    ></circle>
    <circle 
      cx="60%" 
      cy="60%" 
      fill="url(#a)" 
      r="3rem"
    ></circle>
  </svg>

效果对比如下:
在这里插入图片描述

渐变兼容性在PC,iphone,ipad,安卓都支持~

加阴影

<p>加阴影(first:没阴影,second:有阴影)</p>
  <svg>
    <defs>
      <linearGradient id="b" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stop-color="#fff" stop-opacity="1"></stop>
          <stop offset="1" stop-color="#D0CBC7" stop-opacity="1"></stop>
      </linearGradient>
      
      <filter id="bb" width="200%" height="200%">
        <!-- 投影偏移 -->
        <feOffset dx="0" dy="2" />
        <!-- 投影模糊 -->
        <feGaussianBlur stdDeviation="2" result="offset-blur" />
        <!-- 反转投影使其变成内投影 -->
        <feComposite
          operator="out"
          in="SoredurceGraphic"
          in2="offset-blur"
          result="inverse"
        />
        <!-- 内投影附加黑色 -->
        <feFlood flood-color="#BE8C2E" flood-opacity=".95" result="color" />
        <feComposite operator="in" in="color" in2="inverse" result="shadow" />
        <!-- 把内投影显示在图像上 -->
        <feComposite operator="over" in="shadow" in2="SourceGraphic" />
      </filter>
  </defs>
  <circle 
      cx="20%" 
      cy="60%" 
      fill="url(#b)" 
      r="3rem"
    ></circle>
    <circle 
      cx="60%" 
      cy="60%" 
      fill="url(#b)"
      filter="url(#bb)"
      r="3rem"
    ></circle>
  </svg>
  <svg>
    <defs>
      <linearGradient id="a" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stop-color="#7B7B7B" stop-opacity="1"></stop>
          <stop offset="1" stop-color="#0B0B0B" stop-opacity="1"></stop>
      </linearGradient>
      <filter id="aa" x="-0.05" y="0" width="120%" height="120%">
        <!-- 投影偏移 -->
        <feOffset dx="0" dy="1" />
        <!-- 投影模糊 -->
        <feGaussianBlur stdDeviation="1" result="offset-blur" />
        <!-- 反转投影使其变成内投影 -->
        <feComposite
          operator="out"
          in="SoredurceGraphic"
          in2="offset-blur"
          result="inverse"
        />
        <!-- 内投影附加黑色 -->
        <feFlood flood-color="#1D1D1D" flood-opacity=".95" result="color" />
        <feComposite operator="in" in="color" in2="inverse" result="shadow" />
        <!-- 把内投影显示在图像上 -->
        <feComposite operator="over" in="shadow" in2="SourceGraphic" />
      </filter>
  </defs>
  <circle 
      cx="20%" 
      cy="60%" 
      fill="url(#a)" 
      r="3rem"
    ></circle>
    <circle 
      cx="60%" 
      cy="60%" 
      fill="url(#a)" 
      filter="url(#aa)"
      r="3rem"
    ></circle>
  </svg>

效果如下:

在这里插入图片描述

阴影没有加渐变这么顺利,出现了新的问题

iphone中棋子不见了

在这里插入图片描述

排查原因:发现去掉去掉filter标签就能够看到棋子.

于是我查看svg中filter标签的兼容性。如下：

https://caniuse.com/?search=filter svg

在这里插入图片描述

上面写着IOS6就开始支持了,但是在iphone13中就是没有显示出来,所以就只能不能这样画阴影了,得另寻他路.

重叠元素加阴影

  <p>重叠元素加阴影(first:没阴影,second:有阴影)</p>
  <svg>
    <defs>
      <linearGradient id="b" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stop-color="#fff" stop-opacity="1"></stop>
          <stop offset="1" stop-color="#D0CBC7" stop-opacity="1"></stop>
      </linearGradient>
  </defs>
  <circle 
      cx="20%" 
      cy="60%" 
      fill="url(#b)" 
      r="3rem"
    ></circle>
    <circle 
      cx="60%" 
      cy="64%" 
      fill="rgba(0,0,0,.16)"
      r="3rem"
    ></circle>
    <circle 
      cx="60%" 
      cy="60%" 
      fill="url(#b)"
      r="3rem"
    ></circle>
    
  </svg>
  <svg>
    <defs>
      <linearGradient id="a" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stop-color="#7B7B7B" stop-opacity="1"></stop>
          <stop offset="1" stop-color="#0B0B0B" stop-opacity="1"></stop>
      </linearGradient>
  </defs>
  <circle 
    cx="60%" 
    cy="64%" 
    fill="rgba(0,0,0,.24)"
    r="3rem"
  ></circle>
  <circle 
      cx="20%" 
      cy="60%" 
      fill="url(#a)" 
      r="3rem"
    ></circle>
    <circle 
      cx="60%" 
      cy="60%" 
      fill="url(#a)" 
      r="3rem"
    ></circle>

  </svg>

效果如下:

在这里插入图片描述

不过这个需要特别注意顺序,阴影需要在下面显示,所以要先绘制阴影,不然就会把棋子盖住,效果像下面这样:

在这里插入图片描述

突然发现使用重叠元素加出来的阴影更加好看.

边缘棋子不显示问题

在这里插入图片描述

svg中的cricle标签没有z-index层级之说

解决办法：svg面积增大，svg中的元素x，y轴偏移，根据rect画圆角矩形

<p>画圆角矩形</p>
<svg>
    <rect 
    width="60%" 
    height="60%" 
    x="22" 
    y="22" 
    rx="20" 
    ry="20" 
    style="
      fill: transparent; 
      stroke: rgb(151, 91, 42); 
      fill-opacity: 0.5; 
      stroke-opacity: 1; 
      opacity: 1;
      stroke-width: 2;
    "
    ></rect>
  </svg>
  // x,y是矩形的起点;w,h是矩形的宽高;r是圆角矩形的半径

效果如下:
在这里插入图片描述

canvas和svg比较

android效果

canvas截图如下:

在这里插入图片描述

svg截图如下:

在这里插入图片描述

ipad效果

canvas截图如下:

在这里插入图片描述

svg截图如下:

在这里插入图片描述

canvas拍照效果:

在这里插入图片描述

svg拍照效果:

在这里插入图片描述

iphone效果

canvas截图如下:

在这里插入图片描述

svg截图如下:

在这里插入图片描述

canvas拍照效果:

在这里插入图片描述

svg拍照效果:

在这里插入图片描述

从上面效果来说,我觉得svg画的棋盘在移动端更高清,而canvas更像是一张图片,对效果有更加浓厚的兴趣的可以去下载一下源码,然后自己手动在手机上看看效果.

性能比较

我只是通过谷歌浏览器的lighthouse测量了一下,下面是绘制十张棋盘的测试结果,当然觉得这样测量不准确的,也欢迎下载源码自己去测试一下~

canvas

在这里插入图片描述

svg

在这里插入图片描述

从上面结果上看,svg和canvas画十张棋盘的性能,svg优胜一点点,总阻塞时间svg快了100ms的样子.

源码:

为了保证公平性,源码中没有使用任何库,只是js操作,十张棋盘的数据也是一样的.

gitee地址:svg_vs_canvas_chess: svg和canvas在移动端适配比较 (gitee.com)

github地址:https://github.com/tiantianhy/svg_vs_canvas_chess

上述分享中,如有疑问和想法,欢迎一起探讨~

0522Skylar
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas动画科技园_Canvas动画(PC端 移动端)
weixin_39831991的博客
12-22 176
Canvas动画(PC端 移动端)一,介绍与需求1.1,介绍canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。 标记和 SVG以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，...
Canvas 与 SVG 的比较
weixin_61562639的博客
07-14 2637
在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。SVG基于XML，这意味着SVGDOM中的每个元素都是可用的。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。在SVG中，每个被绘制的图形均被视为对象。知道了svg和canvas是什么之后，我们就来比较一下canvas和svg。...
VUE使用canvas实现签名组件，兼容PC移动端
CodingNoob
08-30 1120
效果如下： <template> <div class="sign"> <div class="content"> <canvas id="canvas" :width="width" :height="height"/> </div> <div class="btn"> <button @click="clearCanvas()">清除</button&gt
支持移动端（rem），PC端，CSS SVG 实现成功动画、打勾动画、对号动画
JCM_ZZ的博客
10-12 933
支持移动端（rem），PC端，CSS SVG 实现成功动画、打勾动画、对号动画
在Leaflet中点对象使用SVG和Canvas两种模式的对比
最新发布
夜郎King的博客
05-08 2336
本文首先阐述Leaflet中SVG和Canvas两种模式的原理和Leaflet的相关架构，然后通过实例对比marker的不同规模生成对机器的资源占用，最后使用基于Canvas的技术实现了5W-10W级的点数据展示。
SVG简介
weixin_34247299的博客
10-08 84
最近遇到SVG这个名词，于是查阅资料，做个笔记。 前言 图片的数字化。将图片存储为数据有两种方案。 位图。也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度，反映在视觉上，就是颜色和亮度。这些信息有不同的编码方案，在互联网上最常见的就是RGB。根据需要，编码后的信息可以有不同的位(bit)数——位深。位数越高，颜色越清晰，对比度越高；占用的...
Canvas适配手机端
jlin991的博客
03-13 1万+
Canvas适配困境最近做了个H5小游戏，它的主页的html代码如下：<<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
canvas2svg：将HTML5 Canvas绘制命令转换为SVG
02-04
Canvas2Svg 该库使用JavaScript将Canvas转换为SVG。 换句话说，该库使您可以使用canvas api构建SVG文档。 为什么要使用它？ 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件...
svg在移动端的应用-手势图片拖动，手势放大缩小
06-29
svg在移动端的应用-手势图片拖动，手势放大缩小，比较方便
gantt:使用jsx支持SVG、Canvas和SSR的甘特图库
07-24
使用jsx支持SVG、Canvas和SSR的甘特图库 安装 $ npm install gantt --save 用法 import { SVGGantt , CanvasGantt , StrGantt } from 'gantt' ; const data = [ { id : 1 , type : 'group' , text : '1 ...
实现圆环进度条的三种方式 div svg canvas
05-02
实现圆环进度条的三种方式 div svg canvas 可加qq群：179916551 免积分获取，沟通交流
js canvas实现适用于移动端的百分比仪表盘dashboard
10-19
主要为大家详细介绍了js canvas实现适用于移动端的百分比仪表盘dashboard，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
svg缩放移动、移动轨迹追溯_移动端适配 Part I - 基础知识篇
weixin_33844346的博客
12-23 373
本文首发于：https://juejin.im/post/5e36c4fce51d450268661344单位CSS中的单位相对单位window.innerHeight 浏览器窗口的视口（视觉视口）高度（单位：像素，大小是css像素的数量），包括水平滚动条。window.innerWidth 浏览器视口（视觉视口）宽度（单位：像素，大小是css像素的数量），包括垂直滚动条。绝对单位px与设备屏...
svg大小自适应_用SVG解决移动端1px的技巧
weixin_39655160的博客
11-29 1076
今天介绍一个通过svg来实现移动端1px效果的小技巧SVG的描边方式通常我们在使用一些设计软件时，描边会有三种选择，分别是内描边、居中描边和外描边，比如 photoshop那么，svg 中的描边是哪种方式呢？答案是居中描边，并且无法更改，如下:<svg height="100px" viewBox="0 0 100 100"> <rect x='10' y='10...
svg 编辑器的点击事件兼容pc端和移动端方案
weixin_33734785的博客
04-21 661
本人开发的svg编辑器原本只是针对 PC 端的。在pc端浏览器，可以正常地进行矢量图形地绘制，但在移动端无法使用，在画布上点击没有什么效果。但后来希望可以在一些屏幕大的移动设备上也能简单的使用，做了一些兼容方案，于是总结写下了这篇点击事件的pc端和移动端的适配处理方案分享。 基本架构 和 Adobe Illustrator 一样，这款 svg 编辑器也提供了很多工具。点击工具图标，就切换到对应...
浅谈Canvas与SVG
筱葭的博客
04-04 3581
1、SVG SVG 可缩放矢量图形（Scalable Vector Graphics），是一种使用可扩展标记语言（XML）描述2D图形的语言。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 SVG基于XML，意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加 JavaScript 事件处理器。 在SVG中，每个被绘制的
html5 canvas 图片移动端,支持移动端的HTML5 Canvas逼真黑板特效
weixin_39732866的博客
06-04 207
插件描述：这是一款使用HTML5 Canvas制作的黑板特效，该黑板特效支持手机移动端，它能模拟使用粉笔在黑板上写字的效果。这是一款使用HTML5 Canvas制作的黑板特效，该黑板特效支持手机移动端，它能模拟使用粉笔在黑板上写字的效果。该黑板特效的特点还有：使用鼠标左键能够在黑板上写字。使用鼠标右键能够擦除已写的字。按空格键可以清空黑板上的内容。点击下载按钮可以将写入的内容保存为图片并下载。使用...
移动端h5页面不同尺寸屏幕适配兼容方法
热门推荐
https://github.com/Bot80926
06-03 4万+
最近刚开始做移动端页面，遇到了不少bug，说一下解决移动端不同屏幕页面的适应问题。 1. viewport属性及html页面结构 // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例
Android中使用SVG
Errol's Blog
12-05 6541
简介 可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。——摘自维基百科 它和位图（Bitmap）相对，SVG不会像位图一样因为缩放而让图片质量下降。图像与分辨率无关，收放自如，适配安卓机坑爹的分辨率真是一劳永逸。它的优点在于节约空间，使用方便 Android也...
svg在 ios浏览器绘制canvas
05-26
SVG和Canvas是两种不同的绘图技术。 SVG是一种基于XML的矢量图形格式，使用SVG可以创建各种静态和动态的图形，包括图表、地图、动画等等。SVG的优点是图像质量高、可以缩放而不失真、支持动画效果等等。 Canvas是一种HTML5标准的绘图API，使用Canvas可以在Web页面中绘制各种复杂的图形和动画。Canvas的优点是绘制速度快、可以实现复杂的图形和动画效果、可以直接操作像素等等。 在iOS浏览器中，可以通过使用SVG或Canvas来绘制图形。如果要使用SVG绘制图形，则可以使用SVG标签和相应的属性来创建图形。如果要使用Canvas绘制图形，则可以使用JavaScript代码来操作Canvas API来创建图形。 需要注意的是，iOS浏览器可能对SVG和Canvas的支持程度不同，需要针对不同的浏览器进行测试和适配。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值