canvas绘制彩色线条架构艺术效果代码-html代码-BFW代码库

canvas绘制彩色线条架构艺术效果代码

代码语言：html

代码描述：canvas绘制彩色线条架构艺术效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        html {
          height: 100%;
          background: #222222;
        }
        
        body {
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 800px;
          min-height: 800px;
        }
        
        canvas {
          transform: rotate(180deg);
        }
    </style>


</head>

<body>
    <canvas id="canvas"></canvas>

    <script>
        const canvas = document.getElementById("canvas");
        const outputContainer = document.getElementsByClassName("wrapper")[0];
        const ctx = canvas.getContext("2d");
        
        let canvasSize = 800;
        let ratio = window.devicePixelRatio || 1;
        canvas.width = canvasSize * ratio;
        canvas.height = canvasSize * ratio;
        canvas.style.width = canvasSize + "px";
        canvas.style.height = canvasSize + "px";
        ctx.scale(ratio, ratio);
        
        const colors = ["#006ba6", "#0496ff", "#ffbc42", "#d81159", "#8f2d56"];
        
        // const colors = ["#af4d98", "#d66ba0", "#e5a9a9", "#f4e4ba", "#9df7e5"];
        
        draw();
        
        function draw() {
          let startX = 60;
          let startY = 0;
         .........完整代码请登录后点击上方下载按钮下载查看