Canvas 和 SVG 的初步印象

起因:

它们都是比较新的、现代的东西,有些混淆了。

浏览器支持为IE9及以上,Chrome和FF这些高级的浏览器自动支持。

Canvas 和 SVG 的比较
CanvasSVG
基于像素的,就像是真的画布 基于元素的,矢量图形,类似HTML元素,可以通过浏览器的开发者工具查看到各个元素
对于浏览器就是单个元素,类似于图片元素 多个元素组成的DOM
通过纯Javascript脚本呈现 通过XML文件来描述,并且可以通过CSS来控制样式
事件控制只能通过Canvas这个唯一的元素来监听,如果想要控制具体某个画面元素部分,则只能手动通过JS来读取鼠标的坐标,进而加上进行互动操作 事件可以直接绑定到画面的元素上面,因为那些线、多边形、路径都是可以直接选中的元素

DEMO演示

首先是Canvas的演示,效果是读取一张照片,然后读取照片的像素,将其转换为灰度并输出:

HTML:

<canvas id="effectsCanvas" width="500" height="550" > </canvas> 

JS:

window.onload = function() {
    //try and create a canvas element
    var testCanvas = document.createElement('canvas');

    //check if object supports getContext() method  
    if (testCanvas.getContext !== undefined) {
        var canvas = document.getElementById("effectsCanvas"),
            context = canvas.getContext("2d");

        canvas.style.border = "2px solid blue";

        var destX = 0,
            destY = 0,
            imageObj = new Image();

        imageObj.onload = function() {
            context.drawImage(imageObj, destX, destY);
            var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
            var pixels = imgData.data;
            for (var i = 0, n = pixels.length; i < n; i += 4) {
                var grayscale = pixels[i] * .3 + pixels[i + 1] * .59 + pixels[i + 2] * .11;
                pixels[i] = grayscale; // red
                pixels[i + 1] = grayscale; // green
                pixels[i + 2] = grayscale; // blue
                // alpha
            }
            context.putImageData(imgData, 0, 0);
        };
        imageObj.src = "images/TEST.jpg"; //!!注意这里的图片要和网页同源,不然不能读取照片的信息进而不能实现变成灰度
    } else {
        document.writeln('You are plum outta luck, cuz your browser does not support the canvas element.');
    }
};

演示地址:使用Canvas读取照片并转换为灰度图片/去色


然后是SVG的例子,创建一个线性渐变:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

演示地址:SVG的创建线性渐变填充的椭圆

可以通过Chrome的开发者工具改变一下ellipsecx或者rx的数值,会看到相应的变化,同时还可以像普通的DIV元素一样给它添上CSS样式;而Canvas就只看到一个canvas元素了,要改变只能通过JS来进行。

我的印象就是SVG有点像是没有声音的Flash,Canvas则像是一张特殊的图片,特殊在于可以通过JS来控制。


参考文章:

HTML5 Canvas vs. SVG: Choose the Best Tool for the Job
Thoughts on when to use Canvas and SVG
SVG vs canvas: how to choose

标签: svg, canvas

添加新评论