Waxy主题:自定义Canvas背景

warning: 这篇文章距离上次修改已过1052天,其中的内容可能已经有所变动。

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

什么是Canvas?

Canvas 是 HTML5 中一个新特性,开发者绘制一系列图形。通过和JavaScript配合,可以使静态的图形动起来~

当然更加具体的内容,还请您自己学习,这里不做展开~

后面飞扬的花瓣就是基于Canvas技术实现的后面飞扬的花瓣就是基于Canvas技术实现的

如何自定义Canvas背景?

目前Waxy主题支持3种方式自定义Canvas背景,在文章后面,我提供了几个整理好的背景。

1.文件引入(推荐)

首先,您需要将要引入的背景文件,放入网站的目录下,并且保证可以读取。

这里我放在主题的js目录下这里我放在主题的js目录下

然后进入主题设置,自定义JS,中填入下面的代码:

<script type="text/javascript" src="【此处为该js文件相对与网站的路径地址】"></script>

注意替换src的路径注意替换src的路径

2.代码追加

打开主题下的/js/waxy-main.js文件。

在文件末尾换行一次或多次,将背景文件内所有内容复制进文件最后。

注意复制全了注意复制全了

3.全量设置

然后进入主题设置,自定义JS,中填入下面的代码:

<script type="text/javascript">此处为背景文件内所有的内容</script>

注意,一定不要丢 '&lt;' 和 '&gt;'注意,一定不要丢 '&lt;' 和 '&gt;'

附件

这些背景均搜集自网络,仅修改不兼容Waxy的部分,其他代码均未修改。保留原作者注释及声明





评论已关闭