当前位置： 首页 > news >正文

JS画布的基本使用

news 2026/3/28 6:46:55

直线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #myname{
            border: 1px solid red;

             /* background: linear-gradient(to right, skyblue, pink); */
             /* background-color: greenyellow; */
            }
        </style>
    </head>

    <body>
        <canvas id="myname" width="300px" height="300px"  >
        </canvas>
        

    </body>
<script>
    var name_1=document.getElementById("myname");
    var grd1=name_1.getContext("2d");
    var grd1_1=grd1.createLinearGradient(0,0,200,90);
    // grd1_1.addColorStop(0,"#FF0000");
    // grd1_1.addColorStop(1,"#00FF00");
    grd1_1.addColorStop(0,"skyblue");
    grd1_1.addColorStop(1,"pink");
    grd1.fillStyle=grd1_1;
    grd1.fillRect(0,0,200,90);
    
var name1=name_1.getContext("2d");
            
            name1.moveTo(10,10);
            name1.lineTo(10,90);
            name1.stroke();
            
                name1.moveTo(10,45);
                name1.lineTo(50,45);
                name1.stroke();
                
                name1.moveTo(50,10);
                name1.lineTo(50,90);
                name1.stroke();
                
    var name1_2=name_1.getContext("2d");
        
        name1_2.moveTo(70,20);
        name1_2.lineTo(120,20);
        name1_2.lineTo(70,80);
        name1_2.lineTo(120,80);
        name1_2.stroke()
        
        
        var name1_3=name_1.getContext("2d");
                    
                    name1_3.moveTo(140,10);
                    name1_3.lineTo(140,90);
                    name1_3.stroke();
                    
                        name1_3.moveTo(140,45);
                        name1_3.lineTo(180,45);
                        name1_3.stroke();
                        
                        name1_3.moveTo(180,10);
                        name1_3.lineTo(180,90);
                        name1_3.stroke();
                        

                        
            

</script>

</html>

圆         var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.fillStyle="black";
        cxt.beginPath();
        cxt.arc(10,10,5,0,Math.PI*2,false);
        cxt.closePath();
        cxt.fill();

相关文章：

JS画布的基本使用

直线 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> <style> #myname{ border: 1px solid red; /* background: linear-gradient(to righ…...

编程日记 2023/9/4 14:31:09

c++ set/multiset

set/multiset 集合&#xff0c;一个单个&#xff0c;一个多个(multi)。两个库都是"set"。 https://blog.csdn.net/fckbb/article/details/130917681 对象创建 set(const Pred& compPred()&#xff0c;const A& alA()):创建空集合。set(const set& x):…...

编程日记 2023/9/4 14:30:05

多线程与高并发——并发编程（4）

文章目录 四、阻塞队列1 基础概念1.1 生产者消费者概念1.2 JUC阻塞队列的存取方法2 ArrayBlockingQueue2.1 ArrayBlockingQueue的基本使用2.2 生产者方法实现原理2.2.1 ArrayBlockingQueue的常见属性2.2.2 add方法2.2.3 offer方法2.2.4 offer(time,unit)方法2.2.5 put方法2.3 消…...

编程日记 2023/9/4 14:29:01

设计模式之建造者模式

文章目录 盖房项目需求传统方式解决盖房需求传统方式的问题分析建造者模式概述是建造者模式的四个角色建造者模式原理类图建造者模式的注意事项和细节 盖房项目需求 需要建房子&#xff1a;这一过程为打桩、砌墙、封顶房子有各种各样的&#xff0c;比如普通房&#xff0c;高楼…...

编程日记 2023/9/4 14:27:59

源码编译安装opencv4.6.0，别的版本也行

1.下载opencv4.6.0 系统: ubuntu 1804 64位点我下载opencv 4.6.0 https://codeload.github.com/opencv/opencv/zip/refs/tags/4.6.0 指令下载 推荐: wget -O opencv.zip https://github.com/opencv/opencv/archive/4.6.0.zip wget -O opencv_contrib.zip https://github.com/…...

编程日记 2023/9/4 14:26:56

【MongoDB】Springboot中MongoDB简单使用

1. docker安装MongoDB 拉取镜像 docker pull mongo创建容器 docker run -di --name mongo-service --restartalways -p 27017:27017 -v ~/data/mongodata:/data mongo2. 导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactI…...

编程日记 2023/9/4 14:25:54

Python 面试：单元测试unit testing 使用pytest

1. 对于函数进行单元测试 calc.py def add(x, y):"""Add Function"""return x ydef subtract(x, y):"""Subtract Function"""return x - ydef multiply(x, y):"""Multiply Function""…...

编程日记 2023/9/4 14:24:53

螺旋矩阵、旋转矩阵、矩阵Z字打印

螺旋矩阵 #include <iostream> #include <vector> void display(std::vector<std::vector<int>>&nums){for(int i 0; i < nums.size(); i){for(int j 0; j < nums[0].size(); j){std::cout<<nums[i][j]<< ;}std::cout<<…...

编程日记 2023/9/4 14:23:52

Seaborn绘制热力图的子图

Seaborn绘制热力图的子图 提示&#xff1a;如何绘制三张子图 绘制的时候&#xff0c;会出现如下问题 &#xff08;1&#xff09;如何绘制1*3的子图 &#xff08;2&#xff09;三个显示条&#xff0c;如何只显示最后一个 提示&#xff1a;下面就展示详细步骤 Seaborn绘制热力…...

编程日记 2023/9/4 14:22:50

C++二级题目4

小白鼠再排队 不会 多余的数 #include<iostream> #include<string.h> #include<stdio.h> #include<iomanip> #include<cmath> #include<bits/stdc.h> int a[2000][2000]; int b[2000]; char c[2000]; long long n; using namespace std; i…...

编程日记 2023/9/4 14:21:48

Tomcat 部署时 war 和 war exploded区别

在 Tomcat 调试部署的时候&#xff0c;我们通常会看到有下面 2 个选项。 是选择war还是war exploded 这里首先看一下他们两个的区别&#xff1a; war 模式&#xff1a;将WEB工程以包的形式上传到服务器 &#xff1b;war exploded 模式&#xff1a;将WEB工程以当前文件夹的位置…...

编程日记 2023/9/4 14:20:46

Delphi IdTcpServer IdTcpClient 传输简单文本

Delphi IdTcpServer IdTcpClient 传输简单文本 已经很久敲代码了&#xff0c;想找一段直接Delphi11 TCP简单文本传输&#xff0c;费劲&#xff01;FStringStream 、FStrStream &#xff1a; FStringStream:TStringStream.Create(,TEncoding.UTF8); 已经很久敲代码了&#xff0c…...

编程日记 2023/9/4 14:19:44

界面控件Telerik UI for WPF——Windows 11主题精简模式提升应用体验

Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序&#xff0c;同时还能快速构建企业级办公WPF应用程序。Telerik UI for WPF支持MVVM、触摸等&#xff0c;创建的应用程序可靠且结构良好&#xff0c;非常容易维护&#xff0c;其直观的API将无缝地集成Visua…...

编程日记 2023/9/4 14:18:41

PoseC3D 基于人体姿态的动作识别新范式

摘要1. Introduction2. Related Work动作识别 3D-CNN基于骨架的动作识别 GCN基于骨骼的动作识别 2D-CNN3. Framework3.1. Good Practice for Pose Extraction3.2. From 2D Poses to 3D Heatmap Volumes3.3 基于骨骼的动作识别 3D-CNNPose-SlowOnlyRGBPose-SlowFast4. Experimen…...

编程日记 2023/9/4 14:17:39

html2canvas 截图空白 或出现toDataURL‘ on ‘HTMLCanvasElement或img标签没截下来 的所有解决办法

1.如果截图空白&#xff1a; 1.1以下的参数是必须要有的。 width: shareContent.offsetWidth, //设置canvas尺寸与所截图尺寸相同&#xff0c;防止白边height: shareContent.offsetHeight, //防止白边logging: true,useCORS: true,x:0,y:0,2&#xff0c;如果出现了报错 toData…...

编程日记 2023/9/4 14:16:37

Eclipse错误提示: Symbol ‘xxxx‘ could not be resolved

问题现象&#xff1a; 调试FPGA时&#xff0c;如果在qsys中增加新的内容&#xff0c;到nios中编译的时候就会提示找不到宏定义。 而这些宏定义都是在system.h这个头文件中的&#xff0c;原来的宏定义都能找到&#xff0c;就是新增的找不到&#xff0c;这个应该和头文件路径没有…...

编程日记 2023/9/4 14:15:35

基于Java的OA办公管理系统，Spring Boot框架，vue技术，mysql数据库，前台+后台，完美运行，有一万一千字论文。

基于Java的OA办公管理系统&#xff0c;Spring Boot框架&#xff0c;vue技术&#xff0c;mysql数据库&#xff0c;前台后台&#xff0c;完美运行&#xff0c;有一万一千字论文。 系统中的功能模块主要是实现管理员和员工的管理&#xff1b; 管理员&#xff1a;个人中心、普通员工…...

编程日记 2023/9/4 14:14:34

正则表达式(JAVA)

正则表达式(JAVA) 文章目录 正则表达式(JAVA)用法字符类(只匹配一个字符)预定义字符(只匹配一个字符)数量词贪婪爬取符号捕获分组规则捕获分组符号 非捕获分组案例忽略大小写 用法 正则表达式在用于校验信息是否满足某些规则的时候,非常的好用 在文本中查找满足要求的内容 字…...

编程日记 2023/9/4 14:13:32

264_BOOST中的Json库解析_BOOST_AUTO(itrpromodel, doc.FindMember(“productmodel“))；

BOOST_AUTO(itrpromodel, doc.FindMember("productmodel"));if(itrpromodel != doc.MemberEnd()){BOOST_AUTO(iterd_url...

编程日记 2023/9/4 14:12:31

linux rpm 离线安装 nginx 自用，仅供参考

检查是否安装nginx ps -ef|grep nginx 检查rpm是否安装nginx rpm -qa|grep nginx 查看linux centos 发行版本 cat /etc/centos-release (查看其它发现版本 就把centos替换为别的 比如 红旗的 redflag ) 查看cpu信息 x86_64 lscpu 检查nginx所需依赖 …...

编程日记 2023/9/4 14:11:30

vue3-composition-admin TypeScript最佳实践：类型安全与开发效率的完美平衡

vue3-composition-admin TypeScript最佳实践&#xff1a;类型安全与开发效率的完美平衡 【免费下载链接】vue3-composition-admin &#x1f389; 基于vue3 的管理端模板(Vue3 TS Vuex4 element-plus vue-i18n-next composition-api) vue3-admin vue3-ts-admin 项目地址: http…...

编程新知 2026/3/28 5:56:13

LingBot-Depth实操手册：Gradio API返回JSON结构解析与字段含义

LingBot-Depth实操手册&#xff1a;Gradio API返回JSON结构解析与字段含义 1. 引言&#xff1a;为什么需要了解API返回结构 当你使用LingBot-Depth处理深度图像时&#xff0c;最让人困惑的可能就是API返回的那一串JSON数据。这些数据到底代表什么&#xff1f;每个字段有什么含…...

编程新知 2026/3/28 5:50:11

基于SpringBoot+Vue的疫情物资管理系统管理系统设计与实现【Java+MySQL+MyBatis完整源码】

摘要 近年来&#xff0c;全球范围内突发公共卫生事件频发&#xff0c;疫情物资的高效管理与调配成为保障社会稳定的重要环节。传统物资管理方式依赖人工操作&#xff0c;存在效率低、数据不透明、响应速度慢等问题&#xff0c;难以满足紧急情况下的物资调度需求。尤其在新冠疫情…...

编程新知 2026/3/28 3:57:48

GEO 优化系统实战指南：从架构设计到算法落地

1. GEO优化系统架构设计实战 第一次接触GEO优化系统时&#xff0c;我被各种空间计算概念搞得晕头转向。直到真正动手搭建系统才发现&#xff0c;架构设计就像搭积木&#xff0c;只要掌握关键模块的组装逻辑&#xff0c;就能构建出稳定高效的地理优化引擎。下面分享我在多个项目…...

编程新知 2026/3/28 3:31:28

解析 C++ 中的‘生存期保护’：利用生命周期注解规避 99% 的悬挂指针风险

解析 C 中的“生存期保护”&#xff1a;利用生命周期注解规避 99% 的悬挂指针风险尊敬的各位开发者&#xff0c;各位对 C 内存安全孜孜不倦的探索者们&#xff0c;大家好&#xff01;在 C 的广阔世界中&#xff0c;指针和引用以其强大的能力&#xff0c;赋予了我们对内存的直接…...

编程新知 2026/3/28 3:25:23

PdgCntEditor三步搞定PDF书签目录自动生成

1. 为什么你需要PDF书签目录&#xff1f; 每次打开几百页的PDF文档&#xff0c;像无头苍蝇一样滑动滚动条找内容&#xff1f;这种体验我太懂了。上周处理一份300多页的技术手册&#xff0c;光是翻目录就花了半小时&#xff0c;直到我发现PdgCntEditor这个神器。它能把杂乱无章…...

编程新知 2026/3/28 3:23:21

用LVGL玩转嵌入式UI：5个实战控件代码详解（按钮/滑块/图片/标签/开关）

LVGL嵌入式UI开发实战&#xff1a;五大核心控件深度解析与代码优化 在资源受限的嵌入式设备上实现流畅美观的用户界面&#xff0c;一直是开发者面临的挑战。LVGL&#xff08;Light and Versatile Graphics Library&#xff09;作为一款轻量级开源图形库&#xff0c;凭借其丰富的…...

编程新知 2026/3/28 1:15:39

从CentOS 7迁移到Ubuntu 22.04 LTS，我整理了一份保姆级系统初始化脚本（含内核调优、换源、时区设置）

从CentOS 7迁移到Ubuntu 22.04 LTS&#xff1a;系统初始化与性能调优全指南 当CentOS 7走向生命周期的终点&#xff0c;许多运维团队正面临向新平台的战略转移。Ubuntu 22.04 LTS以其长期支持特性和活跃的社区生态&#xff0c;成为最受欢迎的替代选择之一。但迁移绝非简单的系统…...

编程新知 2026/3/28 1:03:35

LFM2.5-1.2B-Thinking-GGUF应用场景：智能硬件说明书问答机器人落地实践

LFM2.5-1.2B-Thinking-GGUF应用场景&#xff1a;智能硬件说明书问答机器人落地实践 1. 项目背景与需求 在智能硬件领域&#xff0c;产品说明书往往存在以下痛点&#xff1a; 内容专业术语多&#xff0c;普通用户难以理解纸质说明书查找信息效率低不同型号产品差异导致用户混…...

编程新知 2026/3/27 23:59:08

从‘水变油’到‘大师一问三不知’：求实学风如何塑造科学巨匠与避免历史弯路

1. 科学史上的两副面孔&#xff1a;浮夸与求实 1993年&#xff0c;一场名为"水变油"的闹剧在国内掀起轩然大波。某"发明家"声称发明了能将水转化为燃料的"神奇添加剂"&#xff0c;甚至获得了部分政府部门的支持。这个明显违背能量守恒定律的&quo…...

编程新知 2026/3/27 23:57:07