canvas实战——WPS分享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("myCanvas");var context = canvas.getContext("2d");

在获取canvas对象之后，我们先绘画出矩形：

// 画一个填充色为#ff6600，宽为100，高度为140的矩形context.fillStyle = "#ff6600";context.fillRect(0,0,100,140);context.fill();

然后，我们利用安塞贝尔曲线画出折角：

// 利用贝塞尔曲线画折角context.moveTo(50,0);context.quadraticCurveTo(55,5,55,25);context.lineTo(55,40);context.arc(60,40,5,Math.PI,Math.PI/2,true);context.lineTo(75,45);context.quadraticCurveTo(95,45,100,50);context.lineTo(50,0);context.fillStyle = "#ff0844";context.fill();

目前为止，效果图如下（颜色不好找，有误差）：

我们需要将右上角的三角形用白色填充起来，让它看起来像翻起来的样子。

// 填充右上角为whitecontext.beginPath();context.moveTo(50,0);context.lineTo(100,50);context.lineTo(100,0);context.lineTo(50,0);context.closePath();context.fillStyle = "white";context.fill();

最后绘制文字PDF：

 // 绘制文字context.globalCompositeOperation = 'source-atop';context.beginPath();context.font = '25px Arial';context.textAlign = 'center';context.fillStyle = '#fff';context.fillText('PDF',50,90);context.closePath();context.fill();

最终效果图如下：

canvas实战——WPS分享PDF文件的小图标相关推荐

如何把pdf文件变小一点
怎么把pdf文件变小一点?PDF文件的大小就跟人的胖瘦一样,体积太大的PDF文件在使用的过程中必定会受到一些影响,比如说出现了加载慢,传输慢等情况,这时候都是PDF太大引起的.那么我们怎么解决这个问题 ...
如何把pdf文件变小？pdf文件过大如何缩小上传？
经常需要向网站上传pdf文件的小伙伴可能会遇到一个问题,网站对上传的pdf文件大小进行限制,超出大小就会导致上传失败,所以想要顺利上传就需要用到PDF压缩工具来将PDF压缩(https://www.y ...
JavaFX源码分析实战：如何设置窗体标题小图标和任务栏图标
JavaFX实战系列 JavaFX源码分析和实战:javaFX线程结构分析 JavaFX源码分析和实战之launcher启动器:两种启动javaFX的方式及launch(args[])参数设置和获取 ...
【easyui】去掉treegrid结点前面的文件及文件夹小图标
思路: 直接移除指定元素上的class 代码: //去掉结点前面的文件及文件夹小图标function init(){$(".tree-icon,.tree-file").remov ...
如何缩小pdf的大小？如何将pdf文件变小一点？
平时我没问使用的标书pdf文件.论文pdf文件.cad pdf文件,都是多图片.大图片内容,pdf文件体积就会特别大,给别人发送的时候,就会受到限制,所以需要pdf压缩(https://www.yas ...
如何把pdf文件变小一点？pdf文件怎么缩小兆数？
平时在工作.学习中经常用到pdf文件,如果是遇到pdf文件过大的时候就需要用pdf压缩软件,那么有没有比较方便快捷的pdf压缩(https://www.yasuotu.com/pdfyasuo)工具呢 ...
pdf文件怎么压缩？pdf文件变小的简单方法
工作中,pdf文件的使用是非常广泛的,一些特殊的场景下对于pdf文件的大小是有着严格规定的,所以pdf文件压缩成了必备的一项技能,那么怎么将pdf压缩(https://www.yasuotu.com/ ...
idea里面定位文件的小图标消失了，怎么重新显示
这个小图标消失了怎么办呢鼠标右键,去掉这个选项就行了
取消WPS对pdf文件的强制文件默认关联
wps会强制把自己设置为默认的pdf软件,正常的修改办法是无效的.因为WPS有流氓性质,他会强制修改回去.解决办法是进注册表修改运行命令打开注册表是比较方便的方法,按下快捷键Windows+R,在弹 ...

canvas实战——WPS分享PDF文件的小图标

canvas实战——WPS分享PDF文件的小图标相关推荐

最新文章

热门文章