WEB前端教程：简单柱状图
学习掌握 Canvas 和 SVG 绘图相关知识，并且能够运用它们绘制一个简单柱状图。
课程目标
学习掌握 Canvas 和 SVG 绘图相关知识，并且能够运用它们绘制一个简单柱状图。
阅读
- Canvas 教程 - Web API 接口参考 | MDN(opens new window)
- Canvas 绘制图片文字视频教程-慕课网(opens new window)
- HTML5 Canvas Element Tutorial(opens new window)
- SVG | MDN(opens new window)
- JavaScript | MDN(opens new window)
编码
使用 HTML, CSS, JavaScript 实现一个简单的柱状图。
用例描述
- 有横坐标轴线及纵坐标轴线，以及横坐标轴及纵坐标轴的标签文字，不需要有坐标轴刻度线
- 根据输入数据生成柱状图中的柱子
要求
- 可以分别尝试使用 DOM、SVG、Canvas 来实现
- 不使用任何第三方的布局或样式库
- 不使用任何第三方的 JavaScript 库
进阶任务
如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。
提交
把你今天觉得做得最好的代码放在 Github 后进行提交。
总结
依然把今天的学习用时，收获，问题进行记录。
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-29 11:17
- 阅读 ( 547 )
- 分类：WEB前端开发
