【canvas】canvas和svg基本使用

翘阳啦

已于 2022-07-13 16:57:48 修改

阅读量1.2k

点赞数

分类专栏： Vue项目开发数据可视化-ECharts 文章标签： vue.js javascript 前端

于 2022-07-13 14:06:33 首次发布

本文链接：https://blog.youkuaiyun.com/qiaoyangla/article/details/125759086

版权

这篇博客介绍了HTML5的canvas和SVG的基本使用。canvas作为一个画布，用于通过JavaScript进行图像绘制，包括线段、矩形、圆形的绘制及文字、画布清理等操作。SVG则是一种可缩放的矢量图形格式，支持在XML中定义图形，包括直线、矩形和圆形等。两者都是前端开发中用于动态和交互式图形的重要工具。

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

canvas是HTML5的新特性，它允许我们使用canvas元素在网页上通过Javascript绘制图像

canvas标签特点

<canvas>标签只是一个图形容器，相当于一个画布。
canvas标签默认的宽度和高度为 300*150
浏览器默认canvas是一张图片
给canvas画布添加文本内容是没有任何意义的
canvas本身没有绘图能力的，所有的绘制工作必须在js中完成
canvas标签的高度和宽度必须通过canvas标签属性width和height来设置，不能通过样式去设置画布的高度和宽度

获取canvas的“笔”

 //canvas任何操作通过js完成
    let canvas = document.querySelector('canvas')
    //获取画布的笔（上下文）
    let ctx &

最低0.47元/天解锁文章