Canvas：掌握颜色线条与图像文字设置

想象一下，用几行代码就能创造出如此逼真的图像和动画，仿佛将艺术与科技完美融合，前端开发的Canvas技术正是这个数字化时代中最具魔力的一环，它不仅仅是网页的一部分，更是一个无限创意的画布，一个让你的想象力自由驰骋的平台。

目录

颜色样式设置

线条样式设置

图像样式设置

文字样式设置

颜色样式设置

设置基础样式：除了绘制简单的图形，填充线条的样式外，我们还可以给图形进行一个上色处理，对颜色样式进行一个简单的设置，如果我们可以设置一下线条的颜色：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        let heartPath = new Path2D();
        
        // 初始起点
        heartPath.moveTo(300, 200)
        heartPath.bezierCurveTo(350, 150, 400, 200, 300, 300); 
        heartPath.bezierCurveTo(200, 200, 250, 150, 300, 200); 
        // 设置线条为红色，支持16进制，rgb(a) 等格式
        ctx.strokeStyle='red';
        
        ctx.stroke(heartPath)
 
        let chatPath = new Path2D();
        chatPath.moveTo(200, 300)
        chatPath.quadraticCurveTo(150, 300, 150, 200); 
        chatPath.quadraticCurveTo(150, 100, 300, 100); 
        chatPath.quadraticCurveTo(450, 100, 450, 200); 
        chatPath.quadraticCurveTo(450, 300, 250, 300); 
        chatPath.quadraticCurveTo(250, 350, 150, 350); 
        chatPath.quadraticCurveTo(200, 350, 200, 300); 
        ctx.strokeStyle='blue';
        ctx.stroke(chatPath)
    </script>
</body>

得到的效果如下所示：

设置渐变样式：如果想设置渐变的样式的话，可以通过调用createLinearGradient函数创建

1）线性渐变：后添加在0-1之间的某个数值点位上设置颜色，从开始坐标到结束坐标进行颜色样式的渐变效果展示，代码示例如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 绘制矩形
        let linearGradient = ctx.createLinearGradient(100, 200, 400, 500); // 创建线性渐变
        linearGradient.addColorStop(0, "red"); // 添加颜色 从第一个坐标开始
        linearGradient.addColorStop(0.5, "yellow"); // 添加颜色 从中间开始
        linearGradient.addColorStop(1, "blue"); // 添加颜色 从最后一个坐标结束
        ctx.fillStyle = linearGradient; // 设置填充样式
        ctx.fillRect(100, 200, 300, 300);
    </script>
</body>

最终得到的结果如下所示：

当然如果想看到渐变效果动态的变化，没问题，这里我们设置一下渲染函数，动态的改变某一位置的颜色渐变效果，示例代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");

        let index = 0;
        function render() {
            // 把上一次的绘制结果清除
            ctx.clearRect(0, 0, 600, 400);
            index += 0.01
            if (index > 1) {
                index = 0;
            }
            let linearGradient = ctx.createLinearGradient(100, 200, 400, 500); // 创建线性渐变
            linearGradient.addColorStop(0, "red"); // 添加颜色 从第一个坐标开始
            linearGradient.addColorStop(index, "#008c8c"); // 添加颜色 从中间开始
            linearGradient.addColorStop(1, "blue"); // 添加颜色 从最后一个坐标结束
            ctx.fillStyle = linearGradient; // 设置填充样式
            ctx.fillRect(100, 200, 300, 300);
            requestAnimationFrame(render);
        }
        requestAnimationFrame(render);
    </script>
</body>

最终呈现的效果如下所示：

2）镜像渐变：如果想创建镜像渐变的话，可以通过两个坐标表示内外圆，然后设置渐变效果，示例代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 绘制圆
        /*
            参数依次是 (x0, y0, r0, x1, y1, r1)，表示两个圆之间的渐变。在这里：
            (300, 200, 0) 表示内圆的中心坐标 (x0, y0) 是 (300, 200)，半径 r0 是 0，即一个点。
            (300, 200, 100) 表示外圆的中心坐标 (x1, y1) 是 (300, 200)，半径 r1 是 100。
        */
        let radiaGradient = ctx.createRadialGradient(300, 200, 0, 300, 200, 100);
        radiaGradient.addColorStop(0, 'red');
        radiaGradient.addColorStop(0.3, '#ffcccc');
        radiaGradient.addColorStop(1, 'blue');
        ctx.fillStyle = radiaGradient;

        ctx.fillRect(0, 0, 600, 400);
    </script>
</body>

最终呈现的效果如下所示：

当然这里我们可以通过设置俩个球心，实现一个3d地球的效果，示例代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 绘制圆
        let radiaGradient = ctx.createRadialGradient(250, 150, 10, 300, 200, 100);
        radiaGradient.addColorStop(0, '#fff');
        radiaGradient.addColorStop(1, 'blue');
        ctx.fillStyle = radiaGradient;
        ctx.arc(300, 200, 100, 0, Math.PI * 2); // 绘制圆
        ctx.fill() // 填充
    </script>
</body>

最终呈现的效果如下：

3）圆锥渐变：如果想实现圆锥渐变的话，可以使用createConicGradient函数进行操作，示例代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 绘制扇形渐变
        let coneGradient = ctx.createConicGradient(0, 300, 200);
        coneGradient.addColorStop(0, 'red');
        coneGradient.addColorStop(1, 'blue');
        ctx.fillStyle = coneGradient;
        ctx.fillRect(0, 0, 600, 400) // 填充
    </script>
</body>

最终呈现的效果如下所示：

线条样式设置

在上面我们讲解到了canvas的颜色样式的设置，那么如果我们想对canvas的线条进行一个样式的修改应该如何操作呢？这里开始进行一个简单的讲述，给出如下场景的修改线条样式的函数：

lineWidth = value：设置线条宽度。代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 设置线条
        function draw() {
            for (let i = 0; i < 10; i++) {
                ctx.lineWidth = i + 1;
                ctx.beginPath(); // 开始一条新路径
                ctx.moveTo(5+i*14, 5); // 移动到起点
                ctx.lineTo(5+i*14, 140) // 绘制一条到终点
                ctx.stroke();
            }
        }
        draw();
    </script>
</body>

线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半，因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。

lineCap = type：设置线条末端样式。代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 设置线条
        function draw() {
            var lineCap = ['butt', 'round', 'square'];
            // 创建路径
            ctx.strokeStyle = '#09f';
            ctx.beginPath();
            ctx.moveTo(10, 10);
            ctx.lineTo(140, 10);
            ctx.moveTo(10, 140);
            ctx.lineTo(140, 140);
            ctx.stroke();
            // 画线条
            ctx.strokeStyle = 'black';
            for (var i = 0; i < lineCap.length; i++) {
                ctx.lineWidth = 15;
                ctx.lineCap = lineCap[i];
                ctx.beginPath();
                ctx.moveTo(25 + i * 50, 10);
                ctx.lineTo(25 + i * 50, 140);
                ctx.stroke();
            }
        }
        draw();
    </script>
</body>

这里绘制了三条直线，分别赋予不同的 lineCap 值，还有两条辅助线，为了可以看得更清楚它们之间的区别，三条线的起点终点都落在辅助线上。最左边的线用了默认的 butt 。可以注意到它是与辅助线齐平的。中间的是 round 的效果，端点处加上了半径为一半线宽的半圆。右边的是 square 的效果，端点处加上了等宽且高度为一半线宽的方块：

lineJoin = type：设置线条与线条间接接合处的样式。代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 设置线条
        function draw() {
            var lineJoin = ['round', 'bevel', 'miter'];
            ctx.lineWidth = 10;
            for (var i = 0; i < lineJoin.length; i++) {
                ctx.lineJoin = lineJoin[i];
                ctx.beginPath();
                ctx.moveTo(-5, 5 + i * 40);
                ctx.lineTo(35, 45 + i * 40);
                ctx.lineTo(75, 5 + i * 40);
                ctx.lineTo(115, 45 + i * 40);
                ctx.lineTo(155, 5 + i * 40);
                ctx.stroke();
            }
        }
        draw();
    </script>
</body>

这里用三条折线来做例子，分别设置不同的 lineJoin 值。最上面一条是 round 的效果，边角处被磨圆了，圆的半径等于线宽。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter 的时候，线段会在连接处外侧延伸直至交于一点：

setLineDash(segments)：设置当前虚线样式。代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 设置线条
        ctx.moveTo(150, 150)
        ctx.lineTo(300, 200)
        ctx.lineTo(450, 150)
        // 设置虚线
        ctx.setLineDash([10, 20])
        ctx.stroke()
    </script>
</body>

setLineDash 方法接受一个数组，来指定线段与间隙的交替：

lineDashOffset = value：设置当前虚线样式的起始偏移量。

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 设置线条
        let index = 0
        function render() {
            ctx.clearRect(0, 0, 600, 400);
            index++
            if (index > 40) {
                index = 0
            }
            ctx.moveTo(150, 150)
            ctx.lineTo(300, 200)
            ctx.lineTo(450, 150)
            // 设置虚线
            ctx.setLineDash([40, 20])
            // 设置偏移量
            ctx.lineDashOffset = index
            ctx.stroke()
            requestAnimationFrame(render) // 动画渲染
        }
        render()
    </script>
</body>

设置线条的移动：

shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor：设置阴影。代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 设置线条
        let index = 0
        function render() {
            ctx.clearRect(0, 0, 600, 400);
            index++
            if (index > 40) {
                index = 0
            }
            ctx.moveTo(150, 150)
            ctx.lineTo(300, 200)
            ctx.lineTo(450, 150)
            // 设置阴影
            ctx.shadowOffsetX = 10 // 阴影偏移量
            ctx.shadowOffsetY = 10 // 阴影偏移量
            ctx.shadowBlur = 5 // 阴影模糊度
            ctx.shadowColor = "rgba(255, 100, 10, 1)" // 阴影颜色
            // 设置虚线
            ctx.setLineDash([40, 20])
            // 设置偏移量
            ctx.lineDashOffset = index
            ctx.stroke()
            requestAnimationFrame(render) // 动画渲染
        }
        render()
    </script>
</body>

效果如下：

图像样式设置

canvas更有意思的一项特性就是图像操作能力，可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如 PNG、GIF 或者JPEG，你甚至可以将同一个页面中其他 canvas 元素生成的图片作为图片源。

patterns图案填充：在上面我们讲解到了对画面进行一个颜色的填充，把画面填充成某一个固定的颜色或者说是一个渐变的颜色，那如果我想填充的不是渐变的颜色，而是一个个图像呢？这里我们就需要借助patterns这个属性来实现了，如下给出示例代码：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 创建图案样式
        let img = new Image();
        img.src = "./1.jpg"
        // 加载图片
        img.onload = function(){
            // 创建图案对象 createPattern(图片对象, 重复方式)
            let pattern = ctx.createPattern(img, "repeat");
            ctx.fillStyle = pattern;
            ctx.fillRect(0, 0, 600, 400);
        }
    </script>
</body>

最终呈现的效果如下所示：

drawImage：对图片进行缩放，裁剪操作：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 创建图案样式
        let img = new Image();
        img.src = "./1.jpg"
        // 加载图片
        img.onload = function(){
            // 第一种绘制图片方式：参数是：图片资源，以及水平和垂直位置
            // ctx.drawImage(img, 0, 0) 

            // 第二种绘制图片方式：参数是：图片资源，以及水平和垂直位置，以及缩放宽高600和400
            // ctx.drawImage(img, 0, 0, 600, 400) 

            // 第三种绘制图片方式：参数是：图片资源，以及裁剪的起点位置和矩形宽高，以及裁剪以及水平和垂直位置，以及缩放宽高600和400
            ctx.drawImage(img, 1040, 100, 1500, 720, 0, 0, 600, 400) 
        }
    </script>
</body>

最终呈现的效果如下所示：

当然drawImage函数也是可以对视频进行相应操作的，这里简单赘述一下，示例代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <video src="./1.mp4" controls style="width: 400px; height: auto;" hidden></video>
    <button id="btn">播放 / 暂停</button>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 设置图像视频
        let video = document.querySelector("video");
        video.src = "./1.mp4";
        let btn = document.getElementById("btn");
        btn.onclick = function () {
            if (video.paused) {
                video.play();
                render();
            } else {
                video.pause();
            }
        }

        // 添加logo
        let img = new Image();
        img.src = "./1.jpg";
        
        // 渲染函数
        function render() {
            ctx.drawImage(video, 0, 0, 600, 400); // 绘制视频
            ctx.drawImage(img, 500, 350, 100, 50); // 绘制logo
            requestAnimationFrame(render);
        }
    </script>
</body>

效果如下：

文字样式设置

canvas提供了两种方法来渲染文本，这里做一个简单的介绍，如下：

fillText(text, x, y [, maxWidth])：在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 设置文字
        ctx.font = "30px Arial";
        // 设置填充渲染文字
        ctx.fillText("Hello World", 10, 30);
    </script>
</body>

strokeText(text, x, y [, maxWidth])：在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。代码如下：

<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        let canvas = document.getElementById("canvas");      
        // 获取2维画笔，上下文对象
        let ctx = canvas.getContext("2d");
        // 设置文字
        ctx.font = "30px Arial";
        // 设置文字颜色
        ctx.strokeStyle='red';
        // 设置文本对齐方式, 默认是 left
        ctx.textAlign = "center";
        // 设置基线对齐方式, 默认是 top
        ctx.textBaseline = "middle";
        // 设置文本方向，默认是 ltr
        ctx.direction = "rtl";
        // 设置填充渲染文字
        ctx.strokeText("Hello World！", 300, 200);
    </script>
</body>

上面代码同时给出了常用的文字操作方式，这里做一个简单的举例，最终得到的效果如下：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/781777.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

计算云服务2

计算云服务2

第二章 裸金属服务器 什么是裸金属服务器(BMS) 裸金属服务器(Bare Metal Server&#xff0c;BMS)是一款兼具虚拟机弹性和物理机性能的计算类服务为用户以及相关企业提供专属的云上物理服务器&#xff0c;为核心数据库、关键应用系统、高性能计算、大数据等业务提供卓越的计算…
阅读更多...
PCIe 规范核心知识线介绍

PCIe 规范核心知识线介绍

0&#xff0c;总体Topology x86 处理器系统中 PCIe的拓扑结构&#xff1a; PCIe Switch的总体结构 1&#xff0c;PCIe 枚举 BIOS 负责枚举与分派配置设备的 BusID[7:0] : DeviceID[4:0] : FunctionID[2:0]; cpu先识别 Host-PCI-Bridge&#xff0c;其下是Bus0&#xff1b; 在…
阅读更多...
Linux：DHCP服务配置

Linux：DHCP服务配置

目录 一、DHCP概述以及DHCP的好处 1.1、概述 1.2、DHCP的好处 二、DHCP的模式与分配方式 2.1、模式 2.2、DHCP的分配方式 三、DHCP工作原理 四、安装DHCP服务 五、DHCP局部配置并且测试 5.1、subnet 网段声明 5.2、客户机预留指定的固定ip地址 一、DHCP概述以及DHCP…
阅读更多...
在CentOS7云服务器下搭建MySQL网络服务详细教程

在CentOS7云服务器下搭建MySQL网络服务详细教程

目录 0.说明 1.卸载不要的环境 1.1查看当前环境存在的服务mysql或者mariadb 1.2卸载不要的环境 1.2.1先关闭相关的服务 1.2.2查询曾经下载的安装包 1.2.3卸载安装包 1.2.4检查是否卸载干净 2.配置MySQLyum源 2.1获取mysql关外yum源 2.2 查看当前系统结合系统配置yum…
阅读更多...
EN-SLAM：Implicit Event-RGBD Neural SLAM解读

EN-SLAM：Implicit Event-RGBD Neural SLAM解读

论文路径&#xff1a;https://arxiv.org/pdf/2311.11013.pdf 目录 1 论文背景 2 论文概述 2.1 神经辐射场&#xff08;NeRF&#xff09; 2.2 事件相机&#xff08;Event Camera&#xff09; 2.3 事件时间聚合优化策略&#xff08;ETA&#xff09; 2.4 可微分的CRF渲染技术…
阅读更多...
最新版Python安装教程

最新版Python安装教程

一、安装Python 1.下载Python 访问Python官网&#xff1a; https:/www.oython.orgl 点击downloads按钮&#xff0c;在下拉框中选择系统类型(windows/Mac OS./Linux等) 选择下载最新稳定版本的Python 以下内容以演示安装Windows操作系统64位的python 左边是稳定发布版本Stabl…
阅读更多...
芯片封装简介

芯片封装简介

1、背景 所谓“封装技术”是一种将集成电路用绝缘的塑料或陶瓷材料打包的技术。以CPU为例&#xff0c;实际看到的体积和外观并不是真正的CPU内核的大小和面貌&#xff0c;而是CPU内核等元件经过封装后的产品。封装技术对于芯片来说是必须的&#xff0c;也是至关重要的。因为芯片…
阅读更多...
LLM4Decompile——专门用于反编译的大规模语言模型

LLM4Decompile——专门用于反编译的大规模语言模型

概述 论文地址&#xff1a;https://arxiv.org/abs/2403.05286 反编译是一种将已编译的机器语言或字节码转换回原始高级编程语言的技术。该技术用于分析软件的内部工作原理&#xff0c;尤其是在没有源代码的情况下&#xff1b;Ghidra 和 IDA Pro 等专用工具已经开发出来&#…
阅读更多...
灵活视图变换器：为扩散模型设计的革新图像生成架构

灵活视图变换器：为扩散模型设计的革新图像生成架构

在自然界中&#xff0c;图像的分辨率是无限的&#xff0c;而现有的图像生成模型在跨任意分辨率泛化方面存在困难。虽然扩散变换器&#xff08;DiT&#xff09;在特定分辨率范围内表现出色&#xff0c;但在处理不同分辨率的图像时却力不从心。为了克服这一限制&#xff0c;来自上…
阅读更多...
java 栅栏（CyclicBarrier）

java 栅栏（CyclicBarrier）

Java中的栅栏&#xff08;CyclicBarrier&#xff09;是一种用于协调多个线程并发工作的同步辅助类。与CountDownLatch不同&#xff0c;CyclicBarrier允许一组线程相互等待&#xff0c;直到所有线程都到达一个共同的屏障点&#xff08;barrier&#xff09;后&#xff0c;才继续执…
阅读更多...
【qt】TCP 服务端怎么收到信息?

【qt】TCP 服务端怎么收到信息?

上一节,我已经讲了,TCP的监听,是基于上一节的,不知道的可以看看. 当我们的TCP 服务器 有 客户端请求连接的时候,会发出一个信号newConnection(). 在TCP服务端与客户端的通信中,我们需要使用到套接字 QTcpSocket类. 套接字相当于是网络通信的接口,服务段和客户端都要通过它进行通…
阅读更多...
聚焦大模型应用落地，2024全球数字经济大会人工智能专题论坛在京举办

聚焦大模型应用落地，2024全球数字经济大会人工智能专题论坛在京举办

7月1日下午&#xff0c;2024全球数字经济大会人工智能专题论坛在中关村国家自主创新示范区会议中心举办。论坛紧扣大模型应用落地这一热点&#xff0c;以“应用即未来——大模型赋能千行百业&#xff0c;新生态拥抱产业未来”为主题&#xff0c;备受社会各界关注。 一、北京已…
阅读更多...
STM32点灯闪烁

STM32点灯闪烁

stm32c8t6引脚图 开发板引脚图 GPIO端口的每个位可以由软件分别配置成 多种模式。 ─ 输入浮空 ─ 输入上拉 ─ 输入下拉 ─ 模拟输入 ─ 开漏输出 ─ 推挽式输出 ─ 推挽式复用功能 ─ 开漏复用功能 配置GPIO端口步骤&#xff1a;开启时钟->使用结构体设置输出模式…
阅读更多...
LabVIEW从测试曲线中提取特征值

LabVIEW从测试曲线中提取特征值

在LabVIEW中开发用于从测试曲线中提取特征值的功能时&#xff0c;可以考虑以下几点&#xff1a; 数据采集与处理&#xff1a; 确保你能够有效地采集和处理测试曲线数据。这可能涉及使用DAQ模块或其他数据采集设备来获取曲线数据&#xff0c;并在LabVIEW中进行处理和分析。 特…
阅读更多...
吉时利KEITHLEY KI-488驱动和说明

吉时利KEITHLEY KI-488驱动和说明

吉时利KEITHLEY KI-488驱动和说明
阅读更多...
D1.排序

D1.排序

1.快速排序 双指针 采用分治的思想&#xff0c;基于一个数作为标准&#xff0c;进行分治 步骤&#xff1a; 确定分界点的值。x q[l]、q[(lr)/2]、q[r]、随机 都可以&#xff1b;划分区间&#xff1a;使得小于等于x的数放在数组的左边&#xff1b;大于等于x的数放在数组的右边…
阅读更多...
系统级别的原生弹窗窗口

系统级别的原生弹窗窗口

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>原生的弹出窗口dialog</title><style>…
阅读更多...
C语言指针函数指针

C语言指针函数指针

跟着这篇文章重新理解了一下&#xff1a;彻底攻克C语言指针 有一个例子感觉可以拿出来看看&#xff1a; char *(*c[10])(int **p); * 这段声明定义了一个长度为10的数组c&#xff0c;数组中的每个元素都是指向函数的指针。每个函数接受一个类型为int **&#xff08;指向指向…
阅读更多...
Gitlab Fork Workflow（协作工作流）

Gitlab Fork Workflow（协作工作流）

Gitlab Fork WorkFlow&#xff08;协作工作流&#xff09; Fork WorkFlow用于团队间的协作开发。在开发过程中&#xff0c;我们都需要将最新修改的代码合并到代码库上&#xff0c;在代码合并之前&#xff0c;为了保证代码符合上传要求&#xff08;符合需求、代码规范等&#xf…
阅读更多...
2024/7/7周报

2024/7/7周报

文章目录 摘要Abstract文献阅读题目问题本文贡献问题描述图神经网络Framework实验数据集实验结果 深度学习MAGNN模型相关代码GNN为什么要用GNN&#xff1f;GNN面临挑战 总结 摘要 本周阅读了一篇用于多变量时间序列预测的多尺度自适应图神经网络的文章&#xff0c;多变量时间序…
阅读更多...
最新文章

Copyright @ 2022~2023