本文共 1262 字，大约阅读时间需要 4 分钟。

SVG与Canvas是HTML5中用于绘制图形的两种不同技术，它们各具特色，但也可以无缝融合。SVG以矢量无损缩放著称，而Canvas则以高性能绘图著称。通过将SVG内容直接绘制到Canvas上，可以充分发挥两者的优势。

以下示例展示了如何在Canvas上加载SVG图片并进行缩放绘制：

function draw() {    var img = new Image();    img.src = 'chart.svg';    document.body.appendChild(img);    img.onload = function() {        var canvas = document.getElementById('canvas');        var ctx = canvas.getContext('2d');        var width = img.clientWidth * 1.5;        var height = img.clientHeight * 1.5;        var x = 2;        var y = 2;        for (var i = 0; i < 7; i++) {            ctx.drawImage(img, x, y, width, height);            x += width + 2;            width /= 2;            height /= 2;        }    };}

这个代码首先加载一个SVG图片，然后在Canvas上绘制缩放后的版本。通过循环绘制，可以看到 SVG的矢量特性得到了完美保留。

在实际应用中，例如手机电池充电进度的动画，可以结合两种技术。静态部分使用SVG素材实现，动态部分通过Canvas绘制渐变色矩形，动态更新充电进度。

以下示例展示了如何将HTML内容通过SVG的foreignObject特性绘制到Canvas上：

function draw() {    var canvas = document.getElementById('canvas');    var ctx = canvas.getContext('2d');    var data = ...; // 请替换为实际SVG内容    var img = new Image();    img.onload = function() {        ctx.drawImage(img, 0, 0);    };    img.src = 'data:image/svg+xml;base64,' + btoa(data);}

这种方法通过将SVG内容转换为Base64字符串，简化了图片加载过程，适合需要直接在Canvas上绘制SVG内容的场景。

总的来说，SVG与Canvas的结合应用为开发者提供了更大的灵活性，能够满足不同场景的需求。

转载地址：http://cgcbz.baihongyu.com/