这篇博客介绍如何利用canvas实现WPS分享PDF文件时显示的小图标。通过设置canvas的width和height，获取canvas对象，画矩形，安塞贝尔曲线绘制折角，填充白色三角形以及绘制文字，成功复现了PDF图标的效果。
一日，托姐姐给打印简历时。用wps分享简历文件的时候，看到分享文件上如下图小图标。
因为，前几天有简单学习Canvas，所以想着能不能用canvas给它画出来。
首先，我们设置一下canvas的画布：
<body>
<canvas style="border: 1px solid #dadada" id="myCanvas" width="400" height="400"></canvas>
</body>需要注意的是：canvas必须要设置width和height，如上图代码所示，我们可以看到width、height并没有设置在style里。因此这里所说的width、height并非是css中的，它是写在dom上的属性。可能是代表着分辨率吧。
其次，在绘画之前，我们需要获取canvas对象。
var canvas = document.getElementById(&
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
