知识点
相关文章
更多最近更新
更多HTML5 Canvas vs. SVG【HTML5教程 - 第九篇】
2019-03-17 23:16|来源: 未知
俩者都可以在浏览器中创建图形，但是功能性上理解有什么区别呢？
SVG
SVG是一个用来使用XML来描述2D图形的语言。
SVG基于XML，这意味着每一个元素在SVG DOM中都是存在。你可以使用javascript来处理其中的元素。
在SVG中，每一个绘出的图形都被保存成一个对象。如果一个SVG的对象属性变化了，浏览器会自动的重新渲染图形形状。
Canvas
Canvas可以快速的开发2D图形（使用javascript）。
Canvas使用像素来渲染图形。
在Canvas中，一旦图形被绘制好了，就会被浏览器忽略。它的位置可以被移动，但是需要重新被绘制，包括任何图形包含的对象都需要被重新绘制。
Canvas和SVG比较
下表中比较了canvas和SVG的区别：
| Canvas | SVG |
|---|---|
|
|
本文链接：HTML5教程 - 第九篇：HTML5 Canvas vs. SVG，转自：http://www.gbin1.com/tutorials/html5-tutorial/html5-canvas-vs-svg/
相关问答
更多-
Canvas可以从Canvas构造函数创建HTML5 Canvas元素(can the HTML5 Canvas element be created from the Canvas constructor)[2023-05-23]
虽然你可以做new Image()就好了， new Canvas()不是一件事情！ 尽管HTMLCanvasElement是Canvas ，但HTMLCanvasElement甚至不是一件东西。 尽管如此，你不能使用它的构造函数。 document.createElement('canvas'); 是你想要的。 你必须使用它，就像使用div一样。 While you can do new Image() just fine, new Canvas() isn't a thing! Canvas Isn't ... -
要完成此操作，您需要将画布上的width和height属性设置为1000和1000 。 这表示画布的原生大小。 然后，您可以使用CSS缩小画布以使其适合您的页面。 示例HTML： 示例CSS： theCanvas { width: 500px; height: 500px; } 有关本机vs缩放画布大小调整的更多信息，请参阅此答案 。 To accomplish thi ...
-
HTML5画布与SVG与Div(HTML5 Canvas vs. SVG vs. div)[2022-03-14]
简短的答案： SVG对你来说会更容易 ，因为选择和移动它已经被内置了。SVG对象是DOM对象，所以他们有“点击”处理程序等。 DIV是好的，但笨重，并且在大数量的性能加载可怕 。 Canvas具有最佳性能，但您必须自己实现管理状态（对象选择等）的所有概念，或使用库。 长的答案： HTML5画布只是一个位图的绘图面。 你设置绘制（用颜色和线条厚度说），画这个东西，然后Canvas不知道那个东西：它不知道它在哪里或你刚刚绘制的是什么，它是只是像素。 如果你想绘制矩形并让它们移动或者可以选择，那么你必须从头开始编 ... -
我可能不明白你说的是什么，但尝试这个链接可能对你有用 I may not understand what u said but try this link may b useful for u
-
SVG可以很好地使用模式：见维基百科： http : //en.wikipedia.org/wiki/Canvas_element SVG是浏览器中绘制形状的早期标准。 然而，SVG处于一个基本上更高的水平，因为每个绘制的形状被记住为场景图或DOM中的对象，随后将其呈现为位图。 这意味着如果SVG对象的属性更改，浏览器可以自动重新渲染场景。 在上面的例子中，一旦绘制了矩形，它被绘制的事实被系统所遗忘。 如果要更改其位置，则需要重绘整个场景，包括可能已被矩形覆盖的任何对象。 但是在等效的SVG案例中，可以简单地改变矩形的位置属性，浏览 ...编辑2014年11月5日 您现在可以使用ctx.drawImage绘制HTMLImageElements，它们在某些但不是所有的浏览器中都有一个.svg源。 Chrome，IE11和Safari工作，Firefox可以使用一些错误（但是每晚都修复它们）。 var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); } img.src = "http://upload.wikimedia.org/wikipedi ...在你的情况下，你应该去jQuery。 它简单且可定制（技术上和艺术上）。 它也接近基本的“dom / js”做事方式，这是网络互动的“基础”。 学习基础知识总是有益的，但获得结果通常很慢。 在jQuery中，它不是。 好吧，它在Ext-JS中会更快，但你会在jQuery中获得更多。 它将让您更好地了解Web开发的工作方式。 GWT简直太棒了，但它需要你知道web开发是如何工作的，考虑到这是你的第一个web应用程序，这可能不是你的情况。 谷歌实际上已经付出了很多努力，每次发布都会变得越来越好（它已经非常强大） ...SVG是基于标签的，就像HTML本身一样。 所以你必须在SVG标签内插入DOM节点。 你的例子大致转换为下面的代码。 您可以像使用其他节点一样使用JavaScript来创建它，但请确保使用document.createElementNS( 'http://www.w3.org/2000/svg', 'rect' ); 插入节点而不是通常的document.createElement( 'div' ); 。
HTML5 Canvas对比滤镜(HTML5 Canvas contrast filter)[2022-08-27]
既然你说你已经调整了亮度，听起来你需要的只是对比度调整算法这里是C＃方法的一个线程（看看更新2），代码的逻辑是合理的，可以在任何程序中使用： 有效地调整C＃中图像的对比度 - Stack Overflow Since you said you already adjusted the brightness and it sounds like all you need is the algorithm for contrast adjusting here's a thread for a C# metho ...