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. Hadoop的RPC机制及简单实现

    1.RPC简介 Remote Procedure Call 远程过程调用协议 RPC——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC协议假定某些 ...

  2. Python中的exec、eval使用实例

    Python中的exec.eval使用实例 这篇文章主要介绍了Python中的exec.eval使用实例,本文以简洁的方式总结了Python中的exec.eval作用,并给出实例,需要的朋友可以参考下 ...

  3. freeRTOS中文实用教程4--资源管理互斥

    1.前言 访问一个被多任务共享,或是被任务与中断共享的资源时,需要采用”互斥”技术以保证数据在任何时候都保持一致性.这样做的目的是要确保任务从开始访问资源就具有排它性,直至这个资源又恢复到完整状态 F ...

  4. Mysql Binlog三种格式介绍及分析【转】

    一.Mysql Binlog格式介绍       Mysql binlog日志有三种格式,分别为Statement,MiXED,以及ROW! 1.Statement:每一条会修改数据的sql都会记录在 ...

  5. 在12C上创建wm_concat函数

    11gr2和12C上已经摒弃了wm_concat函数,当时我们很多程序员在程序中确使用了该函数,导致程序出现错误,为了减轻程序员修改程序的工作量,只有通过手工创建个wm_concat函数,来临时解决该 ...

  6. 【转】#ifdef __cplusplus+extern "C"的用法

    时常看到别人的头文件中,有这样的代码: #ifdef __cplusplus extern "C" { #endif //一段代码 #ifdef __cplusplus } #en ...

  7. 【bzoj2653】【middle】【主席树+二分答案】

    Description 一个长度为 n 的序列 a ,设其排过序之后为 b ,其中位数定义为 b[n/2] ,其中 a,b 从 0 开始标号 , 除法取下整. 给你一个长度为 n 的序列 s .回答 ...

  8. centos7 部署 docker ce

    =============================================== 2019/4/9_第1次修改                       ccb_warlock === ...

  9. 京东在html5页面中打开本地app的解决方案

    转:https://blog.csdn.net/CameloHuang/article/details/64476385 从html5打开本地的app–如果本地没有app就跳转到下载页面,大家都会认为 ...

  10. pytest十六:allure2 生成 html 报告

    allure 是一个 report 框架,支持 java 的 Junit/testng 等框架,当然也可以支持 python 的 pytest 框架,也可以集成到 Jenkins 上展示高大上的报告界 ...