canvas-nest.js是一款轻量的网页特效,如图:

github地址:https://github.com/hustcc/canvas-nest.js

在普通的html项目中,只要将<script src="dist/canvas-nest.js"></script>插入到body标签最下边即可。

在vue项目中,使用时配置

 import CanvasNest from 'canvas-nest.js';

 const config = { // 配置
color: '255, 0, 0', // 线条颜色
pointColor: '255, 155, 0', // 节点颜色
opacity: 1, // 线条透明度
count: 222, // 线条数量
zIndex: 99 // 画面层级
}; // Using config rendering effect at 'element'.
// element为html的dom对象,如id为body的dom为:document.getElementById('body');
const cn = new CanvasNest(element, config); // destroy
cn.destroy();

但是在vue项目中,引入canvas-nest.js后,直接在created中 new CanvasNest(element, config);的话,可能会报下图的错误,不显示效果

原因是dom没有渲染完毕,就开始使用element。

解决办法:在created中

 this.$nextTick(()=> {
const cn = new CanvasNest(element, config);
})

这样写一个延时操作就可以了,当然也可以使用setTimeout。

总结,遇到parameter 1 is not of type 'Element' 这样类型的报错,需要检查dom是否渲染完毕。

在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'的更多相关文章

  1. vue项目中使用canvas

    canvas API 文档:https://www.canvasapi.cn/ 一.在html中使用canvas canvas 元素用于在网页上绘制图形.  在html中,使用 document.ge ...

  2. vue项目中连接MySQL时,报错ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password:YES)

    一.前言 我们前端很多时候在写vue项目的时候,会把后端的数据拿到本地来跑,在连接MySQL数据库的时候,可能出现一些问题,如: ER_ACCESS_DENIED_ERROR: Access deni ...

  3. Vue项目中如何引用外部js

    第一种方法:(感觉这个有问题) 1.把需要的js放到static文件夹下 2.在Index.html页面引入 3.在webpack.base.conf.js添加下面代码 externals: { 'W ...

  4. vue项目中引入mui.poppicker.js文件时报错“Uncaught ReferenceError: mui is not defined”

    解决:在mui.js的源文件后最后加上 window.mui = mui;

  5. 解决vue项目中使用ivew定制主题报 .bezierEasingMixin();错误

    背景:在使用view-design(iview)定制主体时(覆盖变量方式)出现less错误 完整错误如下 解决方法: 在vue.config.js中添加 less-loader:5.0.x modul ...

  6. vue项目中 如何让外部引入的js模块 的this值 指向vue实例

    当前是vue项目,想在tool.js(工具模块)中封装一个跳转页面的方法, goToUrl(name,query){ if(query){ if(query.addressCode){ vueObje ...

  7. 在vue项目npm run build后,index.html中引入css和js 报MIME type问题

    问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...

  8. vue项目中使用bpmn-基础篇

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项 ...

  9. vue项目中使用bpmn-番外篇(留言问题总结)

    前情提要 “vue项目中使用bpmn-xxxx”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创 ...

随机推荐

  1. Docker三要素

    一.镜像(Image) Docker镜像(Image)就是一个只读的模板,镜像可以用来创建Docker容器,一个镜像可以创建很多容器. Docker 面向对象 镜像 类(class) 容器 实例对象 ...

  2. DDR3基本知识及测试【转】

    转自:http://blog.csdn.net/myarrow/article/details/7847385 一.DDR3简介 DDR3(double-data-rate three synchro ...

  3. windows上python上传下载文件到linux服务器指定路径【转】

    从windows上传文件到linux,目录下的文件夹自动创建 #!/usr/bin/env python # coding: utf-8 import paramiko import datetime ...

  4. 单个 LINQ to Entities 查询中的两个结构上不兼容的初始化过程中出现类型“XXXX”

    最近在做一个报表的时候,用EF使用了Contact方法,但是程式运行一直出错.最近终于找到原因了,写下来提醒下自己.好了,进入正题: 现在我举个栗子,目前数据库中有ParentStudent表和Sub ...

  5. Codeforces Round #Pi (Div. 2) C

    题意 : 给你一个序列,和 K ,选3 个数,下标严格递增, 满足 为递增的等比数列, 等比为K 思路 : 先统计所有数的个数,枚举等比数列的中间数 A, 计算 A 之后的 A*K的个数, A之前的 ...

  6. 基于Jenkins,docker实现自动化部署(持续交互)【转】

      前言 随着业务的增长,需求也开始增多,每个需求的大小,开发周期,发布时间都不一致.基于微服务的系统架构,功能的叠加,对应的服务的数量也在增加,大小功能的快速迭代,更加要求部署的快速化,智能化.因此 ...

  7. php中相对路径和绝对路径如何使用(详解)

    目录 一.总结 一句话总结: 1.php中用用“/”表示根目录么? 2.什么符号表示当前目录(asp,jsp,php都一样)? 3.php中如何使用$_SERVER['DOCUMENT_ROOT']做 ...

  8. h5新API之WebStorage解决页面数据通信问题

    localStorage相信大家都不陌生,今天我们要讨论的不是怎么存储数据,获取数据.而是看看WebStorage的一些妙用,相信大家在开发中遇到过这样一个场景,一个页面中嵌套一个iframe,ifr ...

  9. python之抽象基类

    抽象基类特点 1.不能够实例化 2.在这个基础的类中设定一些抽象的方法,所有继承这个抽象基类的类必须覆盖这个抽象基类里面的方法 思考 既然python中有鸭子类型,为什么还要使用抽象基类? 一是我们在 ...

  10. Git 将项目(代码)从GitHub上克隆(下载)到本地仓库

    要将项目从GitHub上克隆到本地,首先你得下载并安装好git for window. 配置Git: 1.安装完后,右键单击桌面空白处,选择Git Gui Here,进去之后,选择左上角的help选项 ...