首先为大家简单介绍一下这两种方法的工作原理,SVG是在XML中描述二维图形,所以在SVG DOM中的每一个元素都是可用的,你可以为每一个元素增加JS事件处理器。而Canvas是在fly上绘画2D图形,也是使用JS事件处理器,它的绘画能够按照像素重新生成。除此之外,在SVG中,每个图形都会被标记,只要SVG对象属性发生改变,浏览器就会自动重新生成相对应的新图像了,而在Canvas中,一旦图形完成,就会被遗忘,不会被标记,更不用说根据目标对象属性的改变而重新生成新图像了。
第二点,SVG和Canvas的一些其他区别。首先在分辨率上,Canvas是非常依赖图形的分辨率的,这也就限制了我们对于图形的选择,导致大家的实际 *** 作出现很多的麻烦和困难,而SVG对于分辨率就不是那么依赖了,对于图形的选择更加自由。其次,SVG还能支持事件处理器,相对于不能支持事件处理器的Canvas来说,也是十分方便的。最后,在应用方面,由于SVG复杂高度的渲染能力使得它适合带有大型渲染区域的应用程序,例如谷歌地图,而Canvas它的文本渲染能力很弱,渲染速度快,最适合图像密集型的游戏。
GIF和SVG不是同一种图片来的,如果要点击后gif才动需要一张静态图片,并且需要做框/需要一个模版按钮,当这个被点击的element的id是a,动态的图片是id=b,则:
var clickElement = document.getElementById('a')var imageElement = document.getElementById('b')
clickElement.addEventListener('click',clickFunction)//添加点击事件
function clickFunction(){
clickElement.removeEventListener('click')//清除事件绑定
imageElement.setAttribute('src','PATH_TO_FILE/FILENAME.EXT')//更换IMAGE标签图片src属性
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)