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

Javascript中canvas与svg详解

news 2026/5/22 22:28:49

Canvas

在JavaScript中，<canvas> 元素用于在网页上绘制图形，如线条、圆形、矩形、图像等。它是一个通过JavaScript和HTML的<canvas>元素来工作的绘图表面。<canvas> 元素自身并不具备绘图能力，它仅仅提供了一个绘图环境（画布），你需要通过JavaScript来绘制图形。

基本使用

  1. HTML中添加<canvas>元素

<canvas id="myCanvas" width="200" height="100"></canvas>

这里，width 和 height 属性指定了画布的宽度和高度（以像素为单位）。你也可以通过CSS来设置尺寸，但出于绘图的精确性考虑，推荐使用属性设置。

  1. 使用JavaScript绘制

    首先，你需要通过JavaScript获取到这个<canvas>元素，并获取其绘图上下文（context）。绘图上下文是一个封装了绘图功能的对象，它提供了各种绘图方法

var canvas = document.getElementById('myCanvas');  
if (canvas.getContext) {  var ctx = canvas.getContext('2d'); // 获取2D绘图上下文  // 使用ctx进行绘图  
}

绘制基本图形

  • 矩形

ctx.fillStyle = 'red'; // 设置填充颜色  
ctx.fillRect(10, 10, 50, 50); // 绘制填充的矩形  ctx.strokeStyle = 'blue'; // 设置边框颜色  
ctx.strokeRect(30, 30, 50, 50); // 绘制边框的矩形
  • 圆形
ctx.beginPath(); // 开始一个新路径  
ctx.arc(95, 50, 40, 0, 2 * Math.PI); // 绘制圆形  
ctx.fillStyle = 'green';  
ctx.fill(); // 填充圆形  
ctx.lineWidth = 5;  
ctx.strokeStyle = 'black';  
ctx.stroke(); // 绘制圆形的边框
  • 线条
ctx.moveTo(0, 0); // 起始点  
ctx.lineTo(200, 100); // 结束点  
ctx.strokeStyle = 'red';  
ctx.lineWidth = 5;  
ctx.stroke(); // 绘制线条
  • 文本

ctx.font = '30px Arial';  
ctx.fillStyle = 'blue';  
ctx.fillText('Hello, Canvas!', 10, 50); // 在画布上绘制文本

图像

你也可以在<canvas>上绘制图像

var img = new Image();  
img.onload = function() {  ctx.drawImage(img, 0, 0); // 绘制图像  
};  
img.src = 'image.jpg'; // 图像路径-------------------------------------------------<!DOCTYPE html>  
<html>  
<body>  <canvas id="myCanvas" width="500" height="300" style="border:1px solid #000000;">  
Your browser does not support the HTML5 canvas tag.  
</canvas>  <script>  
var canvas = document.getElementById("myCanvas");  
var ctx = canvas.getContext("2d");  
var img = new Image();  // 设置图像的源地址  
img.src = 'your-image-url.jpg'; // 请替换为你的图像URL  // 监听图像加载完成事件  
img.onload = function() {  // 图像加载完成，现在可以绘制了  ctx.drawImage(img, 0, 0, 200, 150); // 绘制图像，参数为：图像对象, x坐标, y坐标, 宽度, 高度  
};  </script>  </body>  
</html>

变换

<canvas> 2D上下文支持多种变换，如平移、缩放、旋转等。

  • 平移

    ctx.translate(100, 100); // 之后的绘图将基于新的原点(100, 100)

  • 缩放

ctx.scale(2, 2); // 之后的绘图将放大两倍
  • 旋转

ctx.rotate(Math.PI / 4); // 之后的绘图将顺时针旋转45度

SVG

在JavaScript中，SVG（Scalable Vector Graphics，可缩放矢量图形）是一种使用XML格式定义的二维矢量图形。与Canvas不同，SVG是基于XML的，因此它本质上是文本格式，可以被任何文本编辑器打开和编辑，并且可以直接嵌入到HTML文档中。SVG图形是矢量图形，这意味着它们可以无限缩放而不会失去清晰度。

SVG的基本结构

SVG图像包含在一个<svg>元素内，该元素可以包含多个图形元素，如圆形（<circle>）、矩形（<rect>）、线条（<line>）、多边形（<polygon>）、路径（<path>）等。<svg>元素可以定义宽度（width）和高度（height）属性，也可以包含viewBox属性来定义SVG的视图区域和比例。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />  <rect x="10" y="20" width="80" height="60" style="fill:blue;stroke:red;stroke-width:2" />  
</svg>

在这个例子中，<circle>元素创建了一个圆形，cx和cy属性定义了圆心的位置，r属性定义了半径。stroke和stroke-width属性定义了圆形的边框颜色和宽度，fill属性定义了圆形的填充颜色。<rect>元素创建了一个矩形，x和y属性定义了矩形左上角的位置，width和height属性定义了矩形的宽度和高度。style属性可以用来设置更多的CSS样式。

在JavaScript中操作SVG

你可以使用JavaScript来动态地创建、修改和删除SVG元素。以下是一个示例，展示了如何使用JavaScript在SVG中动态添加一个圆形:

<!DOCTYPE html>  
<html>  
<body>  <svg id="mySVG" width="100" height="100" xmlns="http://www.w3.org/2000/svg"></svg>  <script>  // 获取SVG元素  var svg = document.getElementById('mySVG');  // 创建一个圆形元素  var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');  // 设置圆形的属性  circle.setAttribute('cx', 50);  circle.setAttribute('cy', 50);  circle.setAttribute('r', 40);  circle.setAttribute('stroke', 'green');  circle.setAttribute('stroke-width', 4);  circle.setAttribute('fill', 'yellow');  // 将圆形添加到SVG中  svg.appendChild(circle);  
</script>  </body>  
</html>

在这个例子中，document.createElementNS方法用于创建SVG元素，因为SVG元素属于不同的命名空间。然后，我们使用setAttribute方法来设置圆形的属性，并将其添加到SVG元素中。

总结

SVG是一种强大的图形格式，可以在网页中创建高质量的矢量图形。通过结合HTML和JavaScript，你可以创建动态和交互式的SVG图形，这些图形可以在各种设备和屏幕尺寸上保持清晰度和可访问性。

[Cesium]加载GeoJSON并自定义设置符号（以点要素为例）_cesium.geojsondatasource.load 添加图标-CSDN博客

相关文章：

Javascript中canvas与svg详解

Canvas 在JavaScript中&#xff0c;<canvas> 元素用于在网页上绘制图形&#xff0c;如线条、圆形、矩形、图像等。它是一个通过JavaScript和HTML的<canvas>元素来工作的绘图表面。<canvas> 元素自身并不具备绘图能力&#xff0c;它仅仅提供了一个绘图环境&a…...

编程日记 2024/7/31 8:53:56

【BUG】已解决：No Python at ‘C:Users…Python Python39python. exe’

No Python at ‘C:Users…Python Python39python. exe’ 目录 No Python at ‘C:Users…Python Python39python. exe’ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班…...

编程日记 2024/7/31 8:52:55

Flink SQL 的工作机制

前言 Flink SQL 引擎的工作流总结如图所示。 从图中可以看出&#xff0c;一段查询 SQL / 使用TableAPI 编写的程序&#xff08;以下简称 TableAPI 代码&#xff09;从输入到编译为可执行的 JobGraph 主要经历如下几个阶段&#xff1a; 将 SQL文本 / TableAPI 代码转化为逻辑执…...

编程日记 2024/7/31 8:50:53

[AI Mem0] 源码解读，带你了解 Mem0 的实现

Mem0 的 CRUD 到底是如何实现的&#xff1f;我们来看下源码。 使用 先来看下&#xff0c;如何使用 Mem0 import os os.environ["OPENAI_API_KEY"] "sk-xxx"from mem0 import Memorym Memory()# 1. Add: Store a memory from any unstructured text re…...

编程日记 2024/7/31 8:49:43

【LLM】-10-部署llama-3-chinese-8b-instruct-v3 大模型

目录 1、模型下载 2、下载项目代码 3、启动模型 4、模型调用 4.1、completion接口 4.2、聊天&#xff08;chat completion&#xff09; 4.3、多轮对话 4.4、文本嵌入向量 5、Java代码实现调用 由于在【LLM】-09-搭建问答系统-对输入Prompt检查-CSDN博客 关于提示词注入…...

编程日记 2024/7/31 8:46:40

C语言 之 理解指针（4）

文章目录 1. 字符指针变量2. 数组指针变量2.1 对数组指针变量的理解2.2 数组指针变量的初始化 3. 二维数组传参的本质4. 函数指针变量4.1 函数指针变量的创建4.2 函数指针变量的使用 5. 函数指针数组 1. 字符指针变量 我们在前面使用的主要是整形指针变量&#xff0c;现在要学…...

编程日记 2024/7/31 8:40:33

Java设计模式—单例模式（Singleton Pattern）

目录 一、定义 二、应用场景 三、具体实现 示例一 示例二 四、懒汉与饿汉 饿汉模式 懒汉模式 五、总结 六、说明 一、定义 二、应用场景 ‌单例模式的应用场景主要包括以下几个方面&#xff1a; ‌日志系统&#xff1a;在应用程序中&#xff0c;通常只需要一个日…...

编程日记 2024/7/31 8:38:32

AV1帧间预测（二）：运动补偿

运动补偿(Motion Compensation,MC)是帧间预测最基础的工具&#xff0c;AV1支持两种运动补偿方式&#xff0c;一种是传统的平移运动补偿&#xff0c;另一种是仿射运动补偿。下面分别介绍这两种运动补偿方法。 平移运动补偿 平移运动补偿是最传统的运动补偿方式&#xff0c;H.26…...

编程日记 2024/7/31 8:37:31

数学建模（5）——逻辑回归

一、二分类 import numpy as np import matplotlib.pyplot as plt from sklearn import datasets from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler from sklearn.linear_model import LogisticRegression from sklea…...

编程日记 2024/7/31 8:34:28

【C++高阶】：深入探索C++11

✨ 心似白云常自在&#xff0c;意如流水任东西 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;C学习 &#x1f680; 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f4…...

编程日记 2024/7/31 8:32:25

6. 自定义Docker镜像

如何自定义Docker镜像&#xff1a;从基础到实践 Docker作为一个容器化平台&#xff0c;使得应用的打包、分发和运行变得更加高效和便捷。本文将详细介绍如何自定义一个Docker镜像&#xff0c;包括镜像的构成、分层原理、创建自定义镜像的具体步骤&#xff0c;并演示如何打包和…...

编程日记 2024/7/31 8:30:22

「12月·长沙」人工智能与网络安全国际学术会议（ISAICS 2024）

人工智能与网络安全国际学术会议(ISAICS 2024)将于2024年12月20日-2024年12月22日在湖南长沙召开。会议中发表的文章将会被收录,并于见刊后提交EI核心索引。会议旨在在为国内与国际学者搭建交流平台,推进不同学科领域的融合发展&#xff0c;就当今人工智能与网络安全范畴内各学…...

编程日记 2024/7/31 8:29:21

【技术支持案例】使用S32K144+NSD8381驱动电子膨胀阀

文章目录 1. 前言2. 问题描述3. 理论分析3.1 NSD8381如何连接电机3.2 S32K144和NSD8381的软件配置 4.测试验证4.1 测试环境4.2 测试效果4.3 测试记录 1. 前言 最近有客户在使用S32K144NSD8381驱动电子膨胀阀时&#xff0c;遇到无法正常驱动电子膨胀阀的情况。因为笔者也是刚开…...

编程日记 2024/7/31 8:28:19

第二期：集成电路（IC）——智能世界的微观建筑大师

嘿&#xff0c;小伙伴们&#xff01;&#x1f44b; 我是你们的老朋友小竹笋&#xff0c;一名热爱创作和技术的工程师。上一期我们聊了聊AI芯片&#xff0c;这次我们要深入到更微观的层面&#xff0c;来探究集成电路&#xff08;IC&#xff09;的世界。准备好一起探索了吗&#…...

编程日记 2024/7/31 8:21:12

基于物联网的区块链算力网络，ＩＧＰ／ＢＧＰ协议

目录 基于物联网的区块链算力网络 ＩＧＰ／ＢＧＰ协议 IGP（内部网关协议） BGP（边界网关协议） 内部使用ISP的外部使用BGP的原因 一、网络规模和复杂性 二、路由协议的特性 三、满足业务需求 四、结论 基于物联网的区块链算力网络 通 过 多个物联网传感器将本地计算…...

编程日记 2024/7/31 8:18:08

每日一题~960 div2 A+B+C(简单奇偶博弈，构造，观察性质算贡献)

A题意&#xff1a; N 长的数组。 一次操作&#xff1a; 最开始的mx 为零。 选出一个数&#xff08;使得这个数>mx) ,之后将mx 更新为这个数&#xff0c;将这个数置为零。 不能做这个操作的&#xff0c;输。 问是否有先手赢的策略。有的话&#xff0c;输出yes 否则no 当时一…...

编程日记 2024/7/31 8:15:02

音视频入门基础：H.264专题（17）——FFmpeg源码获取H.264裸流文件信息（视频压缩编码格式、色彩格式、视频分辨率、帧率）的总流程

音视频入门基础&#xff1a;H.264专题系列文章&#xff1a; 音视频入门基础&#xff1a;H.264专题&#xff08;1&#xff09;——H.264官方文档下载 音视频入门基础&#xff1a;H.264专题&#xff08;2&#xff09;——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…...

编程日记 2024/7/31 8:14:01

Aboboo一些操作

常用快捷键⌨ 快捷键/操作方式 功能 鼠标中键/Esc 进入/退出全屏 空格/Tab 暂停/恢复播放 左/右箭头 快退/快进 Ctrl-左/右箭头 30秒快退/快进 Alt-左/右箭头 60秒快退/快进 Ctrl-Alt-左/右箭头 播放速率调节 PageUp/PageDown 上一句/下一句 上下箭头/滚轮 …...

编程日记 2024/7/31 8:10:57

获取行号LineNumberReader

(每日持续更新&#xff09;jdk api之LineNumberReader基础、应用、实战-CSDN博客...

编程日记 2024/7/31 8:09:55

python数据结构与算法

0.时间复杂度和空间复杂度 快速判断算法时间复杂度&#xff1a;算法运行时间 1.确定问题规模n 2.循环减半 logn 3.k层关于n的循环 n^k 空间复杂度&#xff1a;评估算法内存占用大小 使用几个变量 O&#xff08;1&#xff09; 使用长度为n的一维列表 O&#xff08;n&#xff09…...

编程日记 2024/7/31 8:08:54

【设计模式 14】责任链：谁来拍板

这一课讲责任链模式。什么在变&#xff1a;处理链路经常调整&#xff0c;审批层级和条件经常变。怎么挡&#xff1a;处理者串成链&#xff0c;每个只决定"签还是传"。那张采购申请单在三个部门之间转了十七天。 十七天。买的东西是一批进口检测设备&#xff0c;总价两…...

编程新知 2026/5/22 22:19:03

Unity AI工作流实战指南：从Editor到运行时的稳定集成

1. 这不是“AI插件合集”&#xff0c;而是Unity开发者真正用得上的智能工作流Unity开发者每天面对的&#xff0c;从来不是“要不要用AI”&#xff0c;而是“哪个AI功能能让我今天少改三遍材质球、少跑两次Build、少被美术追着问‘这个Shader为什么在iOS上黑一块’”。我做Unity…...

编程新知 2026/5/22 21:31:03

软件测试行业还有未来吗？从业者该何去何从？

前几天某软出现了稍具规模的维权活动&#xff0c;据说当事人是测试同行&#xff0c;感觉当前从业环境越来越恶劣了&#xff0c;然后我把各大招聘平台&#xff08;如BOSS直聘、拉勾、智联招聘、猎聘等&#xff09;上“软件测试”相关岗位爬了一遍&#xff0c;并做了深度数据挖掘…...

编程新知 2026/5/22 20:30:12

MSTP+VRRP+链路聚合简单配置

实验需求&#xff1a;1.存在两个用户业务网&#xff0c;分布为VLAN 10和VLAN 20&#xff0c;需要SW1作为VLAN 10根桥和VRRP-master设备2.SW2作为VLAN 20根桥和VRRP-master设备3.网段自行规划&#xff0c;全网可达配置思路&#xff1a;两条实例&#xff1a;需要在 MSTP 域中配置…...

编程新知 2026/5/22 19:46:05

精细化管控API调用，Taotoken的访问控制与审计日志功能详解

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 精细化管控API调用&#xff0c;Taotoken的访问控制与审计日志功能详解 当企业或团队将大模型能力集成到自身业务中时&#xff0c;除…...

编程新知 2026/5/22 18:16:01

2026论文必藏降AIGC软件大曝光：一键压到安全线谁最稳

2026年的学术战场已经彻底变了天&#xff0c;论文不再是简单的知识输出&#xff0c;而是一场与AI检测系统的极限博弈。过去大家还在为查重率发愁&#xff0c;现在却集体陷入了更深层的焦虑——如何在不牺牲论文质量的前提下&#xff0c;把AIGC率压到最低&#xff1f;随着AI检测…...

编程新知 2026/5/22 18:07:40

Win10 64 位专用 OpenClaw 小龙虾 AI 小白一键部署教程

适配系统&#xff1a;Windows10 64 位核心亮点&#xff1a;免命令行、免手动配置环境、解压即可安装&#xff0c;运行依赖全部内置&#xff0c;全程可视化操作&#xff0c;新手也能一次性顺利部署 2026 热门开源 AI 智能体专属优化&#xff1a;针对 Win10 系统定制适配&#xf…...

编程新知 2026/5/22 17:11:15

AI教材编写攻略：低查重AI工具实测，轻松生成25万字优质教材！

AI教材写作工具助力教学资源创作 在撰写教材的过程中&#xff0c;资料的支持是必不可少的&#xff0c;但传统的资料整合方式已经无法满足当前的需求。以前&#xff0c;我们需要从各个渠道&#xff0c;比如课标文件、学术文章和教学实例&#xff0c;去花费几天时间筛选出有价值…...

编程新知 2026/5/22 15:06:41

webdriver_manager自动化管理ChromeDriver原理与CI/CD最佳实践

1. 为什么你还在手动下载ChromeDriver&#xff1f;——一个被低估的日常损耗“又双叒叕报错了&#xff1a;‘chromedriver executable needs to be in PATH’。”这句话我过去三年在团队 Slack 里至少见过 27 次&#xff0c;平均每周一次。不是新人&#xff0c;是写了五年 Pyth…...

编程新知 2026/5/22 14:36:26

低空飞行器降噪气动智能反向设计系统已融合人工智能AI软件平台

低空飞行器降噪气动智能反向设计大模型系统已融合人工智能AI软件平台一、系统概述本系统专为低空飞行器在城市低空飞行、近地通航及密集空域作业等场景量身打造。针对当前行业内气动噪声突出、降噪设计迭代缓慢、正向构型试错成本高昂、流噪耦合计算复杂以及合规降噪难度大等核…...

编程新知 2026/5/22 14:27:29