HTML5 canvas与SVG的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45311602/article/details/112538677

这篇博客探讨了canvas与SVG的主要区别。canvas是HTML5引入的新元素，用于在网页上动态绘制图形，依赖分辨率，适合图像密集型游戏。相比之下，SVG是一种更早的用于描述二维图形的XML技术，其图形不受分辨率影响，更适合清晰的静态图形和图标。文章介绍了canvas的基本语法，并展示了如何使用canvas绘制进度条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天刚学习了SVG，今天又来学习canvas，那么canvas比之SVG又有什么区别呢
canvas是html5提供的新元素。
而svg存在的历史要比canvas久远,svg并不是html5专有的标签，最初svg是用xml技术描述二维图形的语言。

主要的话是三个区别：

1.绘制的图片格式不同
2.Canvas不支持事件处理器，SVG支持事件处理器
3.适用范围不同

canvas的基本语法

<canvas></canvas>

关于canvas

双标签，在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸，不用加单位.
如果在css中给宽高会对图像造成拉伸（默认宽高300px*150px）
通过过去绘制工具 .getContext(“2d”) 来在画布中绘制图形
Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和.jpg格式保存存储图像，可以说是位图
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

绘制基本线

var canvas = document.createElement( 'canvas' );
canvas.width = 500;
canvas.height = 400;
canvas.style.border = '1px dashed red';
document.body.appendChild( canvas );
// 获得 CanvasRenderingContext2D 对象
var context = canvas.getContext( '2d' );
// 设置 起点
context.moveTo( 0, 0 );
// 绘制直线
context.lineTo( 500, 400 );
// 设置 起点
context.moveTo( 0, 400 );
// 绘制直线
context.lineTo( 500, 0 );
// 描边显示效果
context.stroke();

使用canvas绘制进度条

 <!-- 设置canvas宽高和边框 -->
    <canvas id="canvas" height="500" width="500" style="border:1px solid #ccc;"></canvas>
    <script>
        //获取canvas
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            //创建画笔
            var van = canvas.getContext('2d');
            var progress = 0;
            drawProgress();
            //创建进度条
            function drawProgress() {
                // 清空画布(每次清空画布重新绘制，才能更新)
                van.clearRect(0, 0, canvas.width, canvas.height);
                // 首先绘制背景
                drawBg();
                // 开始绘制绿色线段
                van.beginPath();
                van.lineWidth = 12; // 设置线宽
                van.strokeStyle = 'green'; // 画笔颜色
                van.lineTo(200, 200);
                van.lineTo(200 + progress, 200);
                van.stroke();
                van.closePath();
                // 开始绘制变动的数字
                van.beginPath();
                van.lineWidth = 1;
                van.fillStyle = '#4a4a4a';
                van.font = '14px serif';
                van.fillText(parseInt(progress / 2) + '%', 404, 205);
                van.fill();
                van.closePath();
                progress++;
                if (progress <= 200) {
                    // 通过setTimeout进行递归调用更新
                    setTimeout(() => {
                        drawProgress();
                    }, 20)
                }
            }

            /**
             * 绘制背景灰色线段
             */
            function drawBg() {
                van.beginPath();
                van.lineWidth = 12;
                van.strokeStyle = '#ccc';
                van.lineTo(200, 200);
                van.lineTo(400, 200);
                van.stroke();
                van.closePath();
            }

        } else {
            alert('不支持');
        }
    </script>