Canvas基本使用

news2024/12/26 10:49:11

1.canvas基本使用

1.1.说明： 

  1. canvas是双标签,h5中新增的属性
  2. 默认宽高为300*150
  3. 浏览器默认canvas展示的是一张图片
  4. 给canvas添加文字内容是没有任何意义的
  5. canvas画布：绘制图形，显示一个文字，必须通过js操作
  6.  不要通过样式去设置画布的宽度与高度

 1.2.实现步骤

1.2.1书写canvas标签

 <canvas width="600" height="400">FOREVER</canvas>

为了提高辨识度，设置边框

        canvas{
            border: 1px solid black;
        }

1.2.2图片展示

 1.2.3绘制三角形

说明：通过getContext()方法可以创建一个实例(画笔)，实例包括很多的方法和属性。从而进行绘制。

  // 获取节点
    let canvas=document.querySelector("canvas")
    // 获取画布的笔
    let ctx=canvas.getContext("2d")
    console.log(ctx);  //
    // 绘制线段的起点的设置
    ctx.moveTo(100,100)
    // 终点
    ctx.lineTo(100,200)
    ctx.lineTo(200,100)
    // 设置图形填充的颜色
    ctx.fillStyle='red'
    // fill()必须要在设置图形颜色的后面进行填充
    ctx.fill()
    // 设置线段的颜色
    ctx.strokeStyle="purple"
    // 直线的宽度
    ctx.lineWidth=5
    // 将起点和终点连接在一起
    ctx.closePath()
    // stroke方法绘制线段
    ctx.stroke()

1.2.4实图展示

 1.2.5源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <!-- canvas是双标签,h5中新增的属性 -->
    <!-- 默认宽高为300*150 -->
    <!-- 浏览器默认为canvas一张图片 -->
    <!-- 给canvas添加文字内容是没有任何意义的 -->
    <!-- canvas画布：绘制图形，显示一个文字，必须通过js操作 -->
    <!-- 不要通过样式去设置画布的宽度与高度 -->
    <canvas width="600" height="400">FOREVER</canvas>
</body>
</html>
<script>
    // 获取节点
    let canvas=document.querySelector("canvas")
    // 获取画布的笔
    let ctx=canvas.getContext("2d")
    console.log(ctx);  //
    // 绘制线段的起点的设置
    ctx.moveTo(100,100)
    // 终点
    ctx.lineTo(100,200)
    ctx.lineTo(200,100)
    // 设置图形填充的颜色
    ctx.fillStyle='red'
    // fill()必须要在设置图形颜色的后面进行填充
    ctx.fill()
    // 设置线段的颜色
    ctx.strokeStyle="purple"
    // 直线的宽度
    ctx.lineWidth=5
    // 将起点和终点连接在一起
    ctx.closePath()
    // stroke方法绘制线段
    ctx.stroke()

</script>

2.绘制矩形

2.1例子1

  ctx.strokeRect(100, 200, 100, 200);

说明：

  1. 没有方法设置颜色，只能是描边
  2. 参数1表示是距离左边为100：x
  3. 参数2上边为200：y
  4. 参数3矩形的宽度为100：width
  5. 参数4矩形的高度为200：height

2.2例子2

// 设置填充的颜色
ctx.fillStyle="green"
// 填充颜色的方法，绘制图形之前填充颜色
ctx.fill()
ctx.fillRect(300,200,100,200)

 说明：

  1. 带有填充颜色的矩形，默认为黑色。

2.3实图展示

2.4源码展示

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas width="600px" height="400px"></canvas>
  </body>
</html>
<script>
  // 获取Dom节点
  let canvas = document.querySelector("canvas");
  // 获取上下文
  let ctx = canvas.getContext("2d");
  // 绘制矩形第一种方式，没有方法设置颜色，只能是描边
  // 参数1表示是距离左边为100，x
  // 参数2上边为200，y
  // 参数3矩形的宽度为100，w
  // 参数4矩形的高度为200,h
  ctx.strokeRect(100, 200, 100, 200);
//   第二种方式绘制矩形,带有填充颜色的矩形，默认为黑色
// 设置填充的颜色
ctx.fillStyle="green"
// 填充颜色的方法，绘制图形之前填充颜色
ctx.fill()
ctx.fillRect(300,200,100,200)
</script>

3. 绘制圆

3.1代码展示

ctx.beginPath();
  // 绘制圆形的方法
  // 参数1是到x的距离
  // 参数2是到y的距离
  // 参数3是r是半径
  // 参数4是起始的弧度  弧度计算公式2*PI*弧度=360   1弧度约等与57度
  // 参数5是是否逆时针绘制
  ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
  // 填充颜色
  ctx.fillStyle = "pink";
  ctx.fill();
  ctx.stroke();
  //  绘制第二个圆形图
  ctx.beginPath();
  ctx.arc(200, 200, 50, 0, 1, true);
  ctx.stroke();

3.2实图展示

 3.3源码展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas width="600px" height="400px"></canvas>
  </body>
</html>
<script>
  // 获取Dom节点
  let canvas = document.querySelector("canvas");
  // 获取上下文
  let ctx = canvas.getContext("2d");
  // 绘制第一个圆形图
  // 开始绘制
  ctx.beginPath();
  // 绘制圆形的方法
  // 参数1是到x的距离
  // 参数2是到y的距离
  // 参数3是r是半径
  // 参数4是起始的弧度  弧度计算公式2*PI*弧度=360   1弧度约等与57度
  // 参数5是是否逆时针绘制
  ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
  // 填充颜色
  ctx.fillStyle = "pink";
  ctx.fill();
  ctx.stroke();
  //  绘制第二个圆形图
  ctx.beginPath();
  ctx.arc(200, 200, 50, 0, 1, true);
  ctx.stroke();
</script>

4.清除画布与绘图文字

4.1清除画布

    // 绘制矩形
    ctx.fillRect(100,100,100,100)
    // 清除画布(整个)
    ctx.clearRect(0,0,600,400)
  1. 参数1是距离矩形左边的距离
  2. 参数2是距离矩形上边的距离
  3. 参数3是清除的宽度
  4. 参数4是清除的高度

4.2绘制文字

4.2.1代码展示

 // 绘制文字
    // 文字大小和字体
    ctx.font="20px 微软雅黑"
    // 文字填充的颜色
    ctx.fillStyle="pink"
    // 绘制文字,第二个参数为到矩形左边的距离，第三个参数为到上边的距离
    ctx.fillText("FOREVER",50,20)

4.2.2实图展示

 4.2.3源码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <!-- 画布的大小最好通过属性设置，而不是通过样式，不然会出现问题 -->
    <canvas width="600px" height="400px"></canvas>
</body>
</html>
<script>
    // 获取Dom节点
    let canvas=document.querySelector("canvas")
    // 获取上下文
    let ctx=canvas.getContext("2d")
    // 绘制矩形
    ctx.fillRect(100,100,100,100)
    // 清除画布(整个)
    ctx.clearRect(0,0,600,400)
    // 绘制文字
    // 文字大小和字体
    ctx.font="20px 微软雅黑"
    // 文字填充的颜色
    ctx.fillStyle="pink"
    // 绘制文字,第二个参数为到矩形左边的距离，第三个参数为到上边的距离
    ctx.fillText("FOREVER",50,20)
</script>

5.绘制柱形图

5.1代码展示

 // 获取Dom节点
  let canvas = document.querySelector("canvas");
  // 获取上下文
  let ctx = canvas.getContext("2d");
  // 设置文字大小，字体
  ctx.font = "16px 微软雅黑";
  // 绘制文字
  ctx.fillText("Canvas数据可视化", 350, 80);
  // 绘制线段
  ctx.moveTo(100, 100); //起始点
  ctx.lineTo(100, 400); //终点
  ctx.lineTo(700, 400); //终点
  ctx.stroke();
  // 绘制其他线段
  // 第一条线
  ctx.moveTo(100, 100);
  ctx.lineTo(700, 100);
  ctx.fillText("150",70,110)

  // 第二条线
  ctx.moveTo(100, 160);
  ctx.lineTo(700, 160);
  ctx.fillText("120",70,170)
  // 第三条线
  ctx.moveTo(100, 220);
  ctx.lineTo(700, 220);
  ctx.fillText("90",70,230)

  // 第四条线
  ctx.moveTo(100, 280);
  ctx.lineTo(700, 280);
  ctx.fillText("60",70,290)

  // 第三条线
  ctx.moveTo(100, 340);
  ctx.lineTo(700, 340);
  ctx.fillText("30",70,350)
  ctx.fillText("0",70,400)
  ctx.stroke();
  // 绘制水平的底部线段
  ctx.moveTo(250, 400);
  ctx.lineTo(250, 410);
  // 底部的文字
  ctx.fillText("食品", 170, 415);

  ctx.moveTo(400, 400);
  ctx.lineTo(400, 410);
  ctx.fillText("数码", 320, 415);
  ctx.moveTo(550, 400);
  ctx.lineTo(550, 410);
  ctx.fillText("服饰", 450, 415);
  ctx.fillText("箱包", 600, 415);
  ctx.stroke();
//   绘制矩形
ctx.fillStyle='pink'
ctx.fillRect(130,200,100,200)
ctx.fillRect(280,100,100,300)
ctx.fillRect(420,200,100,200)
ctx.fillRect(570,300,100,100)

5.2实图展示

5.3源码展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
      }
    </style>
  </head>
  <body>
    <canvas width="800px" height="420px"></canvas>
  </body>
</html>
<script>
  // 获取Dom节点
  let canvas = document.querySelector("canvas");
  // 获取上下文
  let ctx = canvas.getContext("2d");
  // 设置文字大小，字体
  ctx.font = "16px 微软雅黑";
  // 绘制文字
  ctx.fillText("Canvas数据可视化", 350, 80);
  // 绘制线段
  ctx.moveTo(100, 100); //起始点
  ctx.lineTo(100, 400); //终点
  ctx.lineTo(700, 400); //终点
  ctx.stroke();
  // 绘制其他线段
  // 第一条线
  ctx.moveTo(100, 100);
  ctx.lineTo(700, 100);
  ctx.fillText("150",70,110)

  // 第二条线
  ctx.moveTo(100, 160);
  ctx.lineTo(700, 160);
  ctx.fillText("120",70,170)
  // 第三条线
  ctx.moveTo(100, 220);
  ctx.lineTo(700, 220);
  ctx.fillText("90",70,230)

  // 第四条线
  ctx.moveTo(100, 280);
  ctx.lineTo(700, 280);
  ctx.fillText("60",70,290)

  // 第三条线
  ctx.moveTo(100, 340);
  ctx.lineTo(700, 340);
  ctx.fillText("30",70,350)
  ctx.fillText("0",70,400)
  ctx.stroke();
  // 绘制水平的底部线段
  ctx.moveTo(250, 400);
  ctx.lineTo(250, 410);
  // 底部的文字
  ctx.fillText("食品", 170, 415);

  ctx.moveTo(400, 400);
  ctx.lineTo(400, 410);
  ctx.fillText("数码", 320, 415);
  ctx.moveTo(550, 400);
  ctx.lineTo(550, 410);
  ctx.fillText("服饰", 450, 415);
  ctx.fillText("箱包", 600, 415);
  ctx.stroke();
//   绘制矩形
ctx.fillStyle='pink'
ctx.fillRect(130,200,100,200)
ctx.fillRect(280,100,100,300)
ctx.fillRect(420,200,100,200)
ctx.fillRect(570,300,100,100)
</script>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

15.OCR

15.OCR

15.1 OCR流水线及七工作原理 Photo OCR&#xff1a;照片 光学字符识别(photo optical character recognition) Photo OCR注重的问题&#xff1a;如何让计算机都出图片中的文字信息&#xff0c;它有以下步骤&#xff1a; 首先给定某张图片&#xff0c;它将图像扫描一遍&#…
阅读更多...
基于小程序的用户服务技术研究

基于小程序的用户服务技术研究

目录 1. 小程序开发技术原理 2. 用户服务设计3. 数据库设计和管理4. 安全和隐私保护5. 性能优化和测试总结 关于基于小程序的用户服务技术研究&#xff0c;这是一个非常广泛和复杂的领域&#xff0c;需要涉及多个方面的知识和技术。一般来说&#xff0c;基于小程序的用户服务技…
阅读更多...
零基础想入门网安行业，看这一篇就够了!!!

零基础想入门网安行业，看这一篇就够了!!!

由于我之前写了不少网络安全技术相关的故事文章&#xff0c;不少读者朋友知道我是从事网络安全相关的工作&#xff0c;于是经常有人在微信里问我&#xff1a; 我刚入门网络安全&#xff0c;该怎么学&#xff1f;要学哪些东西&#xff1f;有哪些方向&#xff1f;怎么选&#xff…
阅读更多...
跟着AIGC学Linux：简介（一）

跟着AIGC学Linux：简介（一）

文章目录 1.Linux内核的历史2.基本概念3.发行版4.Linux应用领域5.Linux VS Windows横向对比表格&#xff1a; 1.Linux内核的历史 Linux内核最初由一位名叫Linus Torvalds的芬兰计算机科学家于1991年创建。当时&#xff0c;Torvalds是一名赫尔辛基大学的学生&#xff0c;他在寻…
阅读更多...
ROS：话题通信机制详解

ROS：话题通信机制详解

目录 ROS&#xff1a;通信机制一、话题通信简介二、话题通信实操&#xff08;C&#xff09;2.1分析2.2发布方代码2.3订阅方代码2.4配置CMakeLists.txt2.5执行2.6注意 三、话题通信实操&#xff08;python&#xff09;3.1分析3.2发布方代码3.3订阅方代码3.4添加可执行权限3.5配置…
阅读更多...
Apache Log4j2 漏洞原理

Apache Log4j2 漏洞原理

Apache Log4j 远程代码执行漏洞 1.漏洞危害 Apache Log4j被发现存在一处任意代码执行漏洞&#xff0c;由于Apache Log4j2某些功能存在递归解析功能&#xff0c;攻击者可直接构造恶意请求&#xff0c;触发远程代码执行漏洞。经验证&#xff0c;Apache Struts2、Apache Solr、Ap…
阅读更多...
Win10控制面板在哪里打开？Win10控制面板打开方式介绍

Win10控制面板在哪里打开？Win10控制面板打开方式介绍

Win10控制面板在哪里打开&#xff1f;当前很多用户都在使用Win10系统&#xff0c;一些新手用户不清楚在哪里才能打开Win10系统的控制面板&#xff0c;以下给大家介绍三种方式&#xff0c;帮助用户们轻松快速打开Win10控制面板&#xff0c;打开控制面板后用户即可展开不同的设置…
阅读更多...
5-1图像信息提取适当剪掉像素点（matlab程序）

5-1图像信息提取适当剪掉像素点（matlab程序）

代码及运行结果 clear ; close all; gr imread(cameraman.tif); subplot(1,3,1); imshow(gr); subplot(1,3,2); D dct2(gr); F log(abs(D)); imshow(F,[]); subplot(1,3,3); D(abs(D)<200) 0; %会丢掉很多点 &#xff0c;但是原图还可识别&#xff0c;适合做信息提取 M …
阅读更多...
这所院校很保护一志愿，学硕爆冷，全部录取，专硕初试第三竟主动放弃录取！

这所院校很保护一志愿，学硕爆冷，全部录取，专硕初试第三竟主动放弃录取！

一、学校及专业介绍 广州大学&#xff08;Guangzhou University&#xff09;&#xff0c;简称广大&#xff08;GU&#xff09;&#xff0c;是由广东省广州市人民政府举办的全日制普通高等学校&#xff0c;实行省市共建、以市为主的办学体制&#xff0c;是国家“111计划”建设高…
阅读更多...
c语言结构体属性之__attribute__((packed))

c语言结构体属性之__attribute__((packed))

c语言结构体属性之__attribute__((packed)) 0. 引出 事情是这样的&#xff0c;最近在做代码移植时见到了这样一段代码 typedef struct {uint16_t len;uint8_t data[PAIRING_MAX_LEN]; } pairing_rx_buffer_t;static pairing_rx_buffer_t pairing_rx_buffer {}; typedef str…
阅读更多...
四大世界权威大学排名指标及侧重点

四大世界权威大学排名指标及侧重点

U.S.News、QS、ARWU、THE是公认的四大权威世界大学排名&#xff0c;每个排名的侧重点各有不同&#xff0c;故知识人网小编撰文加以介绍。 很多博士后、访问学者和联合培养博士的申请者会注重学校排名。那么都有哪些排名体系呢&#xff1f;一般来说&#xff0c;国际公认的四大权…
阅读更多...
PLC技能在职场中的竞争力如何？

PLC技能在职场中的竞争力如何？

在当前的工作市场上&#xff0c;仅仅掌握PLC可能会限制您的竞争力。尽管PLC在自动化控制系统中扮演重要的角色&#xff0c;但现代工业界对多样化技能和知识的需求越来越高。 为了提高竞争力&#xff0c;以下是一些建议&#xff1a; 学习其他自动化技术&#xff1a;除了PLC&am…
阅读更多...
人脸跟踪：基于人脸检测API的连续检测与姿态估计技术

人脸跟踪：基于人脸检测API的连续检测与姿态估计技术

人脸跟踪技术在视频监控、虚拟现实和人机交互等领域发挥着重要作用。通过连续的人脸检测与姿态估计&#xff0c;可以实现对人脸在视频序列中的跟踪和姿态分析。 本文将介绍基于人脸检测API的人脸跟踪技术&#xff0c;探讨其原理、应用场景以及未来发展前景。 人脸跟踪的意义和…
阅读更多...
typescript中interface，type和Record的使用

typescript中interface，type和Record的使用

vitevue3ts中interface&#xff0c;type和Record的使用 vitevue3ts中interface&#xff0c;type和Record的使用 interface&#xff1a;接口type&#xff1a;类型别名 基本类型组合元组类型捕捉遍历属性 扩展 interface扩展interface&#xff08;合并&#xff09;interface扩展i…
阅读更多...
你以为的网络工程师VS实际工作中的网络工程师

你以为的网络工程师VS实际工作中的网络工程师

我的网工朋友&#xff0c;大家好。 前两天不是端午节嘛&#xff0c;去亲戚家吃饭。饭后闲聊说起&#xff0c;他们家的电脑开不了机了&#xff0c;问我能不能修下。 我说我不太会&#xff0c;让他们打电话报修&#xff0c;会有人上门看的。 结果亲戚蹦出一句话&#xff1a;你…
阅读更多...
Qt Widget提升为QChartView绘制曲线

Qt Widget提升为QChartView绘制曲线

1、在工程文件"*.pro"中添加"charts"组件 在工程文件"*.pro"中添加"charts"组件&#xff0c;同时在工程文件添加qcustomplot类。 QT core gui printsupport charts下载qcustomplot类。 网址&#xff1a;https://www.qcustom…
阅读更多...
技术小知识：分布式中的BASE和CAP原则 ③

技术小知识：分布式中的BASE和CAP原则 ③

一、CAP 理论和 BASE 理论 理论是指导业界实现的纲领&#xff0c;也是提炼了多年研究的精华&#xff0c;在分布式一致性领域&#xff0c;最主要的指导理论是 CAP 和 BASE 两个。 二、CAP理论 CAP原则又称CAP定理&#xff0c;指的是在一个分布式系统中&#xff0c; Consistency&…
阅读更多...
面试官：SpringBoot如何快速实现分库分表？

面试官：SpringBoot如何快速实现分库分表？

一、什么是 ShardingSphere&#xff1f; shardingsphere 是一款开源的分布式关系型数据库中间件&#xff0c;为 Apache 的顶级项目。其前身是 sharding-jdbc 和 sharding-proxy 的两个独立项目&#xff0c;后来在 2018 年合并成了一个项目&#xff0c;并正式更名为 ShardingSp…
阅读更多...
低代码搭建100分的酷炫大屏看板，3分钟打动老板！

低代码搭建100分的酷炫大屏看板，3分钟打动老板！

不久前的一个热门话题是“00后整顿职场”&#xff0c;其实完全是胡说八道&#xff0c;因为大半的00后连工作都找不到&#xff01; 在行业危机&#xff0c;裁员话题不时火爆的今天&#xff0c;别说00后了&#xff0c;90后的打工人们纷纷都有了人还没到中年的就有的危机感。别说升…
阅读更多...
【基于Django框架的在线教育平台开发-01】账号登录及退出登录功能开发

【基于Django框架的在线教育平台开发-01】账号登录及退出登录功能开发

文章目录 1 模型层开发2 视图层开发3 form表单验证4 配置urls.py5 模板层开发6 效果展示 1 模型层开发 用户数据表如下所示&#xff1a; FieldTypeExtraidintPrime Key & Auto Incrementpasswordvarchar(128)last_logindatetime(6)Allow Nullis_superusertinyint(1)usern…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023