canvas绘制网站背景——线条

最新推荐文章于 2023-02-13 10:08:14 发布

纹心｀

最新推荐文章于 2023-02-13 10:08:14 发布

阅读量333

点赞数

本文链接：https://blog.csdn.net/qq_45165908/article/details/105237133

版权

这篇博客介绍了如何利用canvas API在网页上绘制富有动感的线条背景，为网站增添视觉效果。通过创建一个JS文件并导入到目标页面，即可轻松实现这种效果。

摘要由CSDN通过智能技术生成

娱乐一下，想玩的可以直接粘贴创建一个js文件，在想要绘制的页面import导入就可以了

export default function linescanvas(canwidth,canheight,linenum){
   
    /* 
      初始化canvas函数，在挂载时调用
      参数含义：canvas宽、高，绘制线条数量（默认12条，可省略传参）
    */

    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let cw = canvas.width = canwidth;
    let ch = canvas.height = canheight;

    ctx.fillStyle = "#000";
    // 线条数量 默认12
    let lineNum = linenum || 12;
    // 存放线条
    let lineArr = [];
    // 动画"锁"
    let requestID = null;

    // 线的构造
    function Canvasline(pic){
   
        this.pic = pic;
        // 线条的初坐标和终坐标
        this.a = {
   };
        this.b = {
   };

        if( pic == "shu"){
   //竖线
            this.a.x = randomIntFromInterval(0,ch);//0-画布总高中间随机取一个坐标
            this.a.y = 0;
            this.b.x = randomIntFromInterval(0,ch);
            this