canvas与svg的区别（面试题）

最新推荐文章于 2024-08-05 16:35:45 发布
最新推荐文章于 2024-08-05 16:35:45 发布
阅读量5.5k 收藏 13
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijixuanA/article/details/78437134
版权

我们部门老大在面试时问的一道题，我总结了一下这个问题的一些答案，欢迎不同看法或补充。

1、canvas时h5提供的新的绘图方法
svg已经有了十多年的历史

2、vanvas画图基于像素点，是位图，如果进行放大或缩小会失真
svg基于图形，用html标签描绘形状，放大缩小不会失真

3、canvas需要在js中绘制
svg在html正绘制

4、canvas支持颜色较svg多

5、canvas无法对已经绘制的图像进行修改、操作
svg可以获取到标签进行操作

lijixuanA
关注
专栏目录
经典面试题（讨论canvas与svg的区别）
helloword_chen的博客
11-11 2万+
讨论关于canvas和svg的区别。首先canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。   首先，从它们的功能上来讲，canvas可以看做是一个画布。，其绘制出来的图形为
(尴尬的面试题)谈谈Canvas？
m0_60622481的博客
05-09 3166
目录 什么是 canvas? 创建一个画布（Canvas） 使用 JavaScript 来绘制图像 Canvas 坐标 Canvas - 路径 线 ⚪圆 Canvas - 文本 使用 fillText():实心文本 使用 strokeText():空心文本 Canvas - 图像 什么是 canvas? HTML5 <canvas> 元素用于图形的绘制（画布），它只是提供一个场地，具体操作是有脚本进行控制（常用的JS）！ 在js中可以通过多种方法使用 ca..
canvas初学笔记（万字详细版）
最新发布
懒羊羊大王的博客
08-05 918
canvas初学笔记，万字超详细版（附带实战源码）
前端绘图方式Canvas和SVG的区别
weixin_30338481的博客
12-15 2639
Canvas和SVG是html5中支持2种可视化技术，都是可以在画布上绘制图形和放入图片。下面来介绍和分析一下他们。 一.Canvas 和 SVG 简介 1.什么是Canvas？ Canvas 是H5新出来的标签<canvas></canvas> Canvas画布，利用JavaScript在网页绘制图像 在标签中给上宽高：<canvas width="800...
canvas面试题
Menqq的博客
08-18 1755
canvas
SVG和Canvas的区别
foreverling_ling的博客
12-12 1787
在HTML5时代，Canvas被提及的次数越来越多，但是你对SVG了解么？SVG和Canvas一样，可以在html文件里面描绘出各种各样的图形。区别1）SVG是矢量图，放大不失真，而Canvas是位图，由像素点组成，放大会失真 2）Canvas相较于SVG，支持的颜色数更多，更便于绘制色彩丰富的图像 3）Canvas基于HTML，而SVG基于XML兼容性SVG和Canvas都只能在IE8（不包含
Canvas 图合成 面试题
weixin_44758134的博客
05-20 395
面试那些题（1）
baidulixueqin的博客
11-03 812
面试题 更新ing
0.5px的直线、canvas和svg区别、Transform、animation
qq_36582776的博客
03-30 667
1.采用meta viewport的方式 <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/> 这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px 要记得viewport只针对于移动端，只在移动端上才能看到效果 2.采用transform: scale()的方式 transform: scale(0.
web前端面试题总结
lxyqwert的博客
01-15 662
1.怎么让一个元素水平垂直居中 例子：<div class="wrapper"><div class="box"></div></div> 1）设置父元素flex，设置父元素justify-content（定义主轴对齐方式）和align-items（定义交叉轴对齐方式）为center 2）设置父元素display为flex，设置子元素margin为auto 3）设置父元素position为relative，子元素的position为absolute，子元素to
前端开发面试题.html
03-30
非常全面的前端开发面试题： HTML&CSS;： 对Web标准的理解（结构、表现、行为）、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系，常用属性、布局、选择器、权重、盒模型、 Hack、CSS预处理器、CSS3...
H5 Canvas与SVG的比较
AaronChen01的博客
08-16 1081
转载：https://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp 两者都能够在在浏览器中绘图，但两者之间还是不一样的 Canvas 通过Javascript来绘制2D图形。 是逐像素进行渲染的。 其位置发生改变，会重新进行绘制。 SVG 一种使用XML描述的2D图形的语言 SVG基于XML意...
面试题 canvas 和 svg的区别
weixin_40729735的博客
11-21 615
canvas 和 svg都允许在浏览器上绘制图形，但本质上是不同的。 cavas： 通过JS来绘制，只要它的位置发生改变，就得重新绘制 它是逐像素渲染，依赖屏幕的分辨率 弱的文本渲染能力 不支持事件处理 能够jpg、png图像格式保存 适合图像密集的游戏，其中的许多对象会被频繁重绘 SVG:（svg的对象是文档对象模型的一部分） 使用XML的2d语言 不依赖屏幕分辨率 支持事件...
全端面试题15（canvas）
God's asylum的博客
07-05 979
在前端开发领域， 元素和相关的 API 是面试中经常被提及的主题。下面是一些常见的关于 HTML5 Canvas 的面试问题及解答示例： 是 HTML5 引入的一个用于图形渲染的标签。它本身并不具备绘图能力，而是一个容器，需要使用 JavaScript 来绘制图形。通过 或者 获取到 canvas 元素后，使用 方法来获取一个 2D 渲染上下文。 用于设置填充图形的颜色，而 设置描边的颜色。使用 开始路径， 定位起点， 绘制线段，然后 来实际绘制。当需要保存和恢复 的状态时，比如变换矩阵、颜色
被面试官问的Android基础题难倒了？这里有31道面试题 ，牢固你的基础！
Android技术之家
03-16 547
目录1.如何对 Android 应用进行性能分析2.什么情况下会导致内存泄露3.如何避免 OOM 异常4.Android 中如何捕获未捕获的异常5.AN...
HTML5 Canvas 面试题
qq_42431718的博客
12-30 2466
Canvas是HTML5提供的一个绘图API，它允许通过JavaScript在网页上动态绘制图形、图像以及进行图形处理。
前端常见面试题：动画属性，svg和canvas的区别
lucky_girl_girl的博客
02-06 1644
一.css动画属性： 1.animation-name 动画名称。和keyframes名称一致。 2.animation - duration 动画持续时间 3.animation - delay 动画延迟时间 4.animation-timing-function 动画运动轨迹 5.animation-iteration-count 动画运动次数 infinite 无限循环 6.animatio...
canvas和svg的区别？
zybijiso666的博客
10-13 597
Canvas和SVG是两种不同的绘图方法，它们之间的主要区别如下：
canvas 与svg的区别
Lyg_gis的博客
08-18 198
canvas 通过Javascript来绘制2D图形. 是逐像素进行渲染的。 其位置发生改变，会重新进行绘制。 canvas的使用步骤： 获取元素对应的DOM对象，这是一个Canvas对象； 调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象； 调用CanvasRenderingContext2D对象进行绘图。 特点： 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值