一,snap.svg插件在近几天,突然接到一个需求,内容是要在网页上写一个路径的动画,还需要可以随意控制动画的速度,开始于结束,本来是一个图片可以解决的问题,结果就这样变难了呀,在网上查一会之后,突然就发现了svg,他有两个神奇属性stroke-dasharray(控制虚线和空白大小)和stroke ...
分类:
Web程序 时间:
2020-03-31 12:13:46
阅读次数:
125
在上一节的《SVG线条动画实现原理》一文中,了解了SVG中线动画是怎么做的。在这篇文章中,了解了怎么借助Sketch这样的制作软件绘制SVG的路径,然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度(最好是大于其长度,可以通过.getTotalL ...
分类:
其他好文 时间:
2020-03-31 10:28:42
阅读次数:
117
<div> <ul v-if="true"> <li></li> <li></li> <li></li> </ul> <ul v-else="false"> <li> <img src="../images/icon.svg"> </li> </ul> ...
分类:
其他好文 时间:
2020-03-30 10:01:12
阅读次数:
259
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG优势 与其他图像格式相比(比如 J ...
分类:
Web程序 时间:
2020-03-29 22:43:12
阅读次数:
117
怎样写钢笔字硬笔书法钢笔作者:阿敏江苏人民出版社 开头的话 钢笔字,因为天天看得见用得着,和大家都有关系,因此很多人对它都有点兴趣,很想把它练好。特别是广大青少年,都愿意为它花点功夫。对中小学生来说,学好钢笔字,还是一项最基本的教学要求。因此,新出版的钢笔字帖往往很受欢迎。 现有的钢笔字帖,多以提供... ...
分类:
其他好文 时间:
2020-03-28 21:47:12
阅读次数:
108
1、概述 <canvas>元素用于生成图像。它本身就像一个画布,JavaScript 通过操作它的 API,在上面生成图像。它的底层是一个个像素,基本上<canvas>是一个可以用 JavaScript 操作的位图(bitmap)。它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成 ...
分类:
其他好文 时间:
2020-03-28 21:38:34
阅读次数:
82
# Silence[](https://github.com/esofar/cnblogs-theme-silence/releases)[![Cnblogs... ...
分类:
其他好文 时间:
2020-03-25 17:35:15
阅读次数:
131
在看D3.js的时候,无意间看到了一个例子,觉得很有趣,像是会分裂的圆形马赛克。看了下代码,使用svg完成的,但是具体实现方式使得在手机端无法把玩,于是就自己实现了一个canvas版本的。代码很简单,canvas初学者可以自己试试当做练笔,还是挺有趣的一个效果。 Online Demo online ...
分类:
其他好文 时间:
2020-03-25 13:51:54
阅读次数:
118
在网页中会引入哪些常见的静态资源? 1.JS(.js .jsx .coffee .ts(TypeScript 类 c# 语言 c sharp 语言)) 2.CSS (.css .less .scss .sass(基本不用了)) 3.Images(.jpg .png .gif .bmp .svg) 4 ...
分类:
Web程序 时间:
2020-03-23 17:02:13
阅读次数:
103
HTML5 内联 SVG 什么是SVG? SVG 指 可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于 的图形 SVG 使用 XML 格式 定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG优势 ...
分类:
Web程序 时间:
2020-03-23 12:41:10
阅读次数:
87