初识 Canvas（使用 Canvas 绘制直线图形）

news2025/11/1 5:42:40

初识 Canvas（使用 Canvas 绘制直线图形）

  • 参考
  • 描述
  • Canvas
      • Canvas 与 SVG
      • Canvas 元素
          • 替补元素
      • 使用
          • 检测
  • 绘制直线图形
      • 直线
          • 同时绘制多条直线
            • 指定起点
            • 首尾相接
          • 多彩的直线
  • 矩形
      • 描边矩形
      • 填充矩形
      • 结合体
      • 清除矩形区域
  • 多边形

参考

描述

Canvas

你可以使用 JavaScript 在 HTML 5 元素 Canvas 上进行 2D 或 3D 图形的绘制。Canvas 最早由 Apple 引入 WebKit，用于 Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。

Canvas 与 SVG

HTML 5 有两个主要的 2D 图形技术，即 Canvas 与 SVG 。两者的区别如下：

项目CanvasSVG
生成方式通过 JavaScript 动态生成。使用 XML 静态描述。
结果位图矢量图
重绘若发生修改，Canvas 需要进行重绘不需要重绘

Canvas 元素

Canvas 是一个行内块元素，即该元素的 display 属性的值为 inline-block 。默认情况下，Canvas 元素的宽与高分别为 300px 、150px 。在创建 Canvas 元素时，你可以通过该元素的属性 width 为该元素指定宽度，使用属性 height 元素为该元素指定高度。

替补元素

Canvas 元素已被大多数浏览器所支持，如果你担心旧版本浏览器无法显示 Canvas 元素，你可以在 Canvas 元素内部嵌套另一个元素（替补元素）。如果浏览器支持 Canvas 元素，则 Canvas 元素内部嵌套的另一个元素将被忽略；如果浏览器不支持 Canvas 元素，则 Canvas 元素将被忽略，而其内部的元素将正常发挥作用。例如：

<canvas id="canvas" width="600px" height="400px">
    <h1>当前浏览器不支持 HTML 5 元素 Canvas，如果 Canvas 元素影响了您的体验，请更换浏览器访问本网页。</h1>
</canvas>

注：

请不要省略 canvas 元素的结束标签 </canvas>，否则该元素后的元素都将被认为是 canvas 元素的替补元素。如果浏览器支持 canvas 元素，则 canvas 之后的元素都将无法正常显示。

使用

canvas 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。
canvas 起初是空白的。为了展示，首先 JavaScript 脚本需要找到渲染上下文，然后在它的上面绘制。canvas 元素对应的 DOM 对象有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。该方法可以接收一个参数，用于指定上下文的类型。对于 2D 图像的绘制，你可以使用 2d 作为该函数的参数。

检测

你可以通过检测 canvas 元素对应的 DOM 对象的 getContext 属性是否为 undefined 来判断该浏览器是否支持 canvas，并依次决定下一步的操作。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识 Canvas（使用 canvas 绘制直线图形）</title>
    <style>
        *{
            /* 去除元素的部分默认属性 */
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body{
            /* 使 canvas 元素在浏览器视口（可视区域）居中显示 */
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        canvas{
            /* 为 canvas 元素设置边框并为边框设置圆角 */
            border: 2px solid dodgerblue;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600px" height="400px">
        <h1>当前浏览器不支持 HTML 5 元素 Canvas，如果 Canvas 元素影响了您的体验，请更换浏览器访问本网页。</h1>
    </canvas>

    <script src="./index.js"></script>
</body>
</html>

index.js

// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');

// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
    // 如果浏览器支持则获取 canvas 的渲染上下文
    const canvas = canvas_e.getContext('2d');
}else{
    console.log('Canvas Not Supported')
}

绘制直线图形

使用 canvas 绘制不同的直线图形，需要变化的仅仅只是 JavaScript 部分的代码。在本篇文章的后续讲解中，默认 HTML 部分使用如下代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识 Canvas（使用 canvas 绘制直线图形）</title>
    <style>
        *{
            /* 去除元素的部分默认属性 */
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body{
            /* 使 canvas 元素在浏览器视口（可视区域）居中显示 */
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        canvas{
            /* 为 canvas 元素设置边框并为边框设置圆角 */
            border: 2px solid dodgerblue;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600px" height="400px">
        <h1>当前浏览器不支持 HTML 5 元素 Canvas，如果 Canvas 元素影响了您的体验，请更换浏览器访问本网页。</h1>
    </canvas>

    <script src="./index.js"></script>
</body>
</html>

直线

在 Canvas 中，我们可以使用 canvas 元素对应的 DOM 对象的 lineTo() 及 moveTo() 方法的配合来绘制直线。
其中，lineTo() 用于描述画笔的走向，而 moveTo() 则用于移动画笔。lineTo() 及 moveTo() 函数均接收两个参数，其中第一个参数为 X 轴坐标，第二个参数为 Y 轴坐标。坐标 (0, 0) 位于画布的左上角。

注：

  1. 在 Canvas 的坐标系中，Y 轴坐标有上到下是递增的。

坐标轴

  1. canvas 元素对应的 DOM 对象的方法在需要距离的地方直接使用数字即可，默认单位为 像素 。
  2. 画笔没有默认的起始位置。因此，在绘制图形之前，你必须使用 moveTo() 方法将画笔移动至画布中的某个地方，否则图形将无法被成功绘制。
  3. 使用 moveTo() 与 lineTo() 方法仅仅只是对线条的描述，如果需要将描述付诸实际还需要在对线条描述完成后使用 stroke() 方法将线条画出来。
// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');

// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
    // 如果浏览器支持则获取 canvas 元素的渲染上下文
    const canvas = canvas_e.getContext('2d');
    // 指定开始绘制的起始地点
    canvas.moveTo(0, 0);
    // 移动画笔至画布中坐标为 (200px, 200px) 的位置
    canvas.lineTo(200, 200);
    // 开始对图形进行绘制
    canvas.stroke();
}else{
    console.log('Canvas Not Supported')
}

效果：

效果

同时绘制多条直线
指定起点
// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');

// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
    // 如果浏览器支持则获取 canvas 元素的渲染上下文
    const canvas = canvas_e.getContext('2d');
    canvas.moveTo(0, 0);
    canvas.lineTo(200, 200);
    canvas.moveTo(0, 0);
    canvas.lineTo(150, 300);
    canvas.stroke();
}else{
    console.log('Canvas Not Supported')
}

注：

你可以在每次使用 lineTo() 方法对直线的轨迹进行描述前通过 moveTo() 方法为该直线的绘制指定绘制的起点。

执行效果：

效果

首尾相接

如果你没有在多个 lineTo() 之间使用 moveTo() 函数来为直线的绘制指定绘制的起点，那么上一条直线的终点将作为下一条直线的起点（第一条直线的起点必须使用 moveTo() 方法来进行指定）。

让我们利用这个特性来绘制一个三角形：

// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');

// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
    // 如果浏览器支持则获取 canvas 元素的渲染上下文
    const canvas = canvas_e.getContext('2d');
    canvas.moveTo(0, 0);
    canvas.lineTo(150, 300);
    canvas.lineTo(300, 150);
    canvas.lineTo(0, 0);
    canvas.stroke();
}else{
    console.log('Canvas Not Supported')
}

效果：

效果

多彩的直线

你可以通过使用 canvas 对应的 DOM 对象的 strokeStyle 属性来指定画笔的颜色。颜色你可以通过赋予 strokeStyle 属性如下类型的表示进行指定。

  1. 十六进制表示的颜色值
  2. rgba()
  3. rgb()
  4. 颜色关键字，如 red 。

使用如下代码绘制一个红色的三角形：

// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');

// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
    // 如果浏览器支持则获取 canvas 元素的渲染上下文
    const canvas = canvas_e.getContext('2d');
    canvas.moveTo(0, 0);
    canvas.strokeStyle = "rgb(255, 0, 0)";
    canvas.lineTo(150, 300);
    canvas.lineTo(300, 150);
    canvas.lineTo(0, 0);
    canvas.stroke();
}else{
    console.log('Canvas Not Supported')
}

效果

矩形

canvas 提供了两种方法绘制矩形：

项目描述
fillRect(x, y, width, height)绘制填充矩形
strokeRect(x, y, width, height)绘制描边矩形

其中：

fillRect() 与 strokeRect() 方法的参数及意义均相同。
x 与 y 表示矩形左上角所在的坐标；
width 与 height 则分别表示矩形宽度与高度。

描边矩形

// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');

// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
    // 如果浏览器支持则获取 canvas 元素的渲染上下文
    const canvas = canvas_e.getContext('2d');
    canvas.strokeRect(150, 100, 300, 200);
}else{
    console.log('Canvas Not Supported')
}

效果：

效果

注：

同直线一样，你可以在使用 strokeRect() 方法绘制描边矩形之前通过 strokeStyle 属性来设置矩形边框的颜色。

填充矩形

// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');

// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
    // 如果浏览器支持则获取 canvas 元素的渲染上下文
    const canvas = canvas_e.getContext('2d');
    canvas.fillRect(150, 100, 300, 200);
}else{
    console.log('Canvas Not Supported')
}

效果：

效果

注：

你可以在使用 fillRect() 方法绘制描边矩形之前通过 fillStyle 属性来设置填充矩形所用到的颜色。

结合体

// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');

// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
    // 如果浏览器支持则获取 canvas 元素的渲染上下文
    const canvas = canvas_e.getContext('2d');
    canvas.strokeStyle = "dodgerblue";
    canvas.strokeRect(150, 100, 300, 200);
    canvas.fillStyle = "pink";
    canvas.fillRect(150, 100, 300, 200);
}else{
    console.log('Canvas Not Supported')
}

效果：

效果

清除矩形区域

你可以使用 clearRect(x, y, width, height) 来指定需要被清除的矩形区域，被清除的区域将不会有任何 canvas 内容。

// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');

// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
    // 如果浏览器支持则获取 canvas 元素的渲染上下文
    const canvas = canvas_e.getContext('2d');
    canvas.strokeStyle = "dodgerblue";
    canvas.strokeRect(150, 100, 300, 200);
    canvas.fillStyle = "pink";
    canvas.fillRect(150, 100, 300, 200);
    // 对绘制的矩形进行部分清除
    canvas.clearRect(250, 150, 200, 100)
}else{
    console.log('Canvas Not Supported')
}

效果：

效果

注：

  1. 观察本示例效果图可以发现，矩形的边框并没有被清除。这表明为矩形添加边框，边框并不是在原矩形内部生成的，而是在矩形的外围生成的。矩形的总面积（矩形面积及边框面积）在添加边框后增大了。
  2. 在本示例中，你可以使用 clearRect(0, 0, canvas.width, canvas.height) 清除 Canvas 中的所有内容。

多边形

Canvas 并没有提供绘制多边形的 API ，但我们可以通过绘制多条直线的方式绘制各种各样的多边形。

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

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

相关文章

3 梯度下降算法

3 梯度下降算法

文章目录问题方法穷举法分治法梯度下降算法梯度梯度下降算法课程代码随机梯度下降算法批量梯度下降&#xff08;mini-batch&#xff09;课程来源&#xff1a; 链接其他觉得别人总结的比自己好&#xff0c;采用之的&#xff1a; 链接以及 BirandaのBlog&#xff01;问题方法 穷…
阅读更多...
飞速的网格【Steema】：TeeGrid for .NET 2023.1.23 Crack

飞速的网格【Steema】：TeeGrid for .NET 2023.1.23 Crack

TeeGrid for .NET 的数据网格控件为您的 Visual Studio 项目提供了一个非常快速的网格。 快速浏览 功能齐全的数据网格控件 适用于 WinForms、ASP.NET Core MVC 的易于使用的数据网格 TeeGrid for .NET 是一个原生的 c# 网格控件&#xff0c;目前可用于 WinForms 项目和 NET …
阅读更多...
优先级队列（堆）

优先级队列（堆）

1.优先级队列1.1概念前面介绍过队列&#xff0c;队列是一种先进先出&#xff08;FIFO&#xff09;的数据结构&#xff0c;但是有些情况下&#xff0c;操作的数据可能带有优先级时&#xff0c;可能需要优先级高的元素先入队列&#xff0c;该场景中&#xff0c;使用队列显然不合适…
阅读更多...
7、数据类型转换

7、数据类型转换

目录 一、隐式类型转换 二、显示类型转换 类型转换是将一个值从一种类型更改为另一种类型的过程。例如&#xff0c;可以将String类型的数据“457”转换为数值型&#xff0c;也可以将任意类型的数据转换为String类型。 一、隐式类型转换 从低级类型向高级类型的转换&#xf…
阅读更多...
一起自学SLAM算法：10.1 RTABMAP算法

一起自学SLAM算法：10.1 RTABMAP算法

连载文章&#xff0c;长期更新&#xff0c;欢迎关注&#xff1a; 同前面介绍过的大多数算法一样&#xff0c;RTABMAP也采用基于优化的方法来求解SLAM问题&#xff0c;系统框架同样遵循前端里程计、后端优化和闭环检测的三段式范式。这里重点讨论RTABMAP两大亮点&#xff0c;一个…
阅读更多...
python实现问卷星自动填写(可以跳过智能验证)

python实现问卷星自动填写(可以跳过智能验证)

最近有一个社会实践需要做问卷调查&#xff0c;突发奇想搞一个自动化脚本&#xff0c;省事省米 1 下载依赖selenium selenium是一款网页爬虫重要的工具。 2 安装chrome驱动 这里需要准备chrome浏览器以及对应的驱动。需要注意的是驱动的版本需要和chrome保持一致。 chrome…
阅读更多...
Mybatis框架介绍及使用

Mybatis框架介绍及使用

文章目录1. 概述1.1什么是框架1.2 Mybatis是什么1.3 Mybatis流程分析2. 参数的使用2.1 保存时获取插入id2.2 #{}与${}的区别2.3 parameterType 的使用2.4 SqlMapConfig.xml 中配置的内容3. 动态SQL3.1 <if>标签3.2 <where>标签3.3 <foreach > 标签3.4 抽取重…
阅读更多...
ipv6内网穿透，有ipv6地址外网无法访问

ipv6内网穿透，有ipv6地址外网无法访问

问题描述 光猫已经开启ipv6&#xff0c;并且电脑/服务器已经有ipv6地址&#xff0c;只能通过ipv6局域网访问&#xff0c;外网/手机流量访问设备 原因分析&#xff1a; 光猫没有关闭防火墙路由器入站防护 解决方案&#xff1a; 1.光猫没有关闭防火墙 这里以中国移动的光猫为…
阅读更多...
（17）目标检测算法之 YOLOv8 算法改进详细解析

（17）目标检测算法之 YOLOv8 算法改进详细解析

目标检测算法之 YOLOv8 算法改进详细解析 1.YOLO的一些发展历史 YOLOv1&#xff1a;2015年Joseph Redmon和 Ali Farhadi等 人&#xff08;华盛顿大学&#xff09; YOLOv2&#xff1a;2016年Joseph Redmon和**Ali Farhadi等人*&#xff08;华盛顿大学&#xff09;* YOLOv3&am…
阅读更多...
【JavaEE】多线程之线程安全（volatile篇），wait和notify

【JavaEE】多线程之线程安全（volatile篇），wait和notify

目录 内存可见性问题 volatile关键字 从JMM的角度来看内存可见性 wait和notify wait notify-notifyAll 内存可见性问题 首先运行一段代码&#xff0c;线程t1 用 Mycount.flag 作为标志符&#xff0c;当不为0的时候就跳出循环&#xff0c;线程t2 通过输入来改变 Mycount.f…
阅读更多...
springboot 入门

springboot 入门

springboot是什么 传统的开发模式下&#xff0c;无论是基于xml或注解&#xff0c;都要做许多配置&#xff0c;如果项目中集成越多的其他框架&#xff0c;配置内容也会越多。为了让开发人员以最少的配置去开发应用&#xff0c;springboot诞生了。springboot的原则是约定大于配置…
阅读更多...
VSCode中4个Settings(JSON)的区别与联系

VSCode中4个Settings(JSON)的区别与联系

目录 &#x1f525; 前言 1. Preferences: Open Default Settings(JSON) 2. Preferences: Open User Settings 3. Preferences: Open Settings(JSON) 4. Preferences: Open Workspace Settings(JSON) &#x1f525; 总结 &#x1f525; 前言 在VSCode中输入快捷键ctrlsh…
阅读更多...
读书笔记：梯度法求函数的最小值 gradient_method.py ← 斋藤康毅

读书笔记：梯度法求函数的最小值 gradient_method.py ← 斋藤康毅

● 由多元函数全部变量的偏导数汇总而成的向量称为梯度&#xff08;gradient&#xff09;。梯度指示的方向是各点处的函数值减小最多的方向。● 虽然梯度的方向并不一定指向最小值&#xff0c;但沿着它的方向能够最大限度地减小函数的值。因此&#xff0c;在寻找函数的最小值&a…
阅读更多...
一篇五分生信临床模型预测文章代码复现——Figure 8 生存曲线鲁棒性分析

一篇五分生信临床模型预测文章代码复现——Figure 8 生存曲线鲁棒性分析

之前讲过临床模型预测的专栏，但那只是基础版本，下面我们以自噬相关基因为例子，模仿一篇五分文章，将图和代码复现出来，学会本专栏课程，可以具备发一篇五分左右文章的水平： 本专栏目录如下： Figure 1：差异表达基因及预后基因筛选(图片仅供参考) Figure 2. 生存分析，…
阅读更多...
Linux输入子系统简析

Linux输入子系统简析

1. 前言 限于作者能力水平&#xff0c;本文可能存在谬误&#xff0c;因此而给读者带来的损失&#xff0c;作者不做任何承诺。 2. 背景 本文基于 Linux 4.14 内核源码进行分析。 3. 简介 Linux 内核输入子系统&#xff0c;负责对系统中的输入设备进行管理。 一方面&#xf…
阅读更多...
Spring Cloud_Ribbon负载均衡服务调用

Spring Cloud_Ribbon负载均衡服务调用

目录一、概述1.是什么2.官网资料3.能干嘛二、Ribbon负载均衡演示1.架构说明2.POM三、Ribbon核心组件Irule1.IRule2.如何替换3.新建package&#xff08;注意&#xff1a;包的位置&#xff09;4.上面包下新建MySelfRule规则类5.主启动类添加RibbonClient6.测试四、Ribbon负载均衡…
阅读更多...
Python将JSON格式文件导入 redis，多种方法

Python将JSON格式文件导入 redis，多种方法

在导入前需要先确定你已经安装 Redis&#xff0c;并且可以启动相关服务。 windows 上启动 redis 的命令是 redis-server.exe redis.windows.conf&#xff0c;效果图如下&#xff1a; 文章目录使用 Python 连接 redis安装 redis 与 导入使用代码连接 Redis写入键值操作 JSON 文…
阅读更多...
第26章 分布式缓存数据库配置的定义实现

第26章 分布式缓存数据库配置的定义实现

1 Core.Configuration.CacheConfig namespace Core.Configuration { /// <summary> /// 【缓存配置--类】 /// <remarks> /// 摘要&#xff1a; /// 通过该类中的属性成员实例对“appsettings.json”文件中的1个指定缓存项(键/值对)在内存或指定分布式软件中…
阅读更多...
mysql-installer-community-8.0.22.0安装教程

mysql-installer-community-8.0.22.0安装教程

1. 下载 mysql-installer-community-8.0.22.0安装包 首先去官网&#xff1a;https://dev.mysql.com/downloads/installer/ 下载MySQL。 2. 默认Next 3. 点击Execute 4. 同意安装 5. 点击Next后点Yes 6. 点击Execute 这里出现10个选项是正确的&#xff0c;如果不是&#xff0c;…
阅读更多...
C++ vector 容器介绍

C++ vector 容器介绍

C vector 容器介绍 C的vector是标准库中常见的一种容器&#xff0c;使用起来非常方便&#xff0c;可以用来代替c原本的数组。vector是种容器&#xff0c;类似数组一样&#xff0c;但它的size可以动态改变。vector的元素在内存中连续排列&#xff0c;这一点跟数组一样。由于vect…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023