HTML图形

HTML图形

  • 1. HTML5 Canvas
  • 2.HTML5 内联 SVG
  • 3.HTML 5 Canvas vs. SVG

1. HTML5 Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

1、创建使用 Canvas 元素

向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度:

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

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">// 使用 document.getElementById() 获取一个在 HTML 中 id 为 "myCanvas" 的 <canvas> 元素var c=document.getElementById("myCanvas");// 调用 getContext("2d") 方法,获取这个 <canvas> 的 2D 绘图环境var cxt=c.getContext("2d");// fillStyle 属性用来设置将要绘制的形状或图形的填充颜色,此处为红色cxt.fillStyle="#FF0000";// fillRect(x, y, width, height) 方法在画布上绘制一个填充的矩形。// 参数 (0, 0) 表示矩形的左上角起始位置在画布的左上角(即坐标 (0, 0))// 150 是矩形的宽度,75 是矩形的高度cxt.fillRect(0,0,150,75);
</script>

2、更多 Canvas 实例

1️⃣实例 - 线条

在这里插入图片描述

<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();
</script>

2️⃣实例 - 圆形

在这里插入图片描述

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();
</script>

3️⃣实例 - 渐变

在这里插入图片描述

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);
</script>

2.HTML5 内联 SVG

SVG是一种基于 XML 的矢量图形格式,用于描述二维图形。它的主要特点是可缩放,图像在不同分辨率下不会失真,适合在网页上呈现高质量的图形和图表。SVG 支持图形元素(如路径、矩形、圆形、文本等)、样式、交互(如点击事件)和动画,广泛用于网页开发、数据可视化、图标等场景。

在 HTML5 中,可以将 SVG 元素直接嵌入 HTML 页面中:

<!DOCTYPE html>
<html>
<body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"><polygon points="100,10 40,180 190,60 10,60 160,180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg></body>
</html>

在这里插入图片描述


3.HTML 5 Canvas vs. SVG

Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【pytorch】pytorch入门5:最大池化层(Pooling layers )

文章目录 前言一、定义概念 缩写二、参数三、最大池化操作四、使用步骤总结参考文献 前言 使用 B站小土堆课程 一、定义概念 缩写 池化&#xff08;Pooling&#xff09;是深度学习中常用的一种操作&#xff0c;用于降低卷积神经网络&#xff08;CNN&#xff09;或循环神经网…

constructor

java 构造函数 在Java中&#xff0c;构造函数是用于初始化对象的特殊方法。构造函数具有与类同名的方法&#xff0c;并且没有返回类型。以下是Java构造函数的一些关键点和示例&#xff1a; 特点&#xff1a; 名称与类名相同&#xff1a;构造函数的名称必须与类的名称完全一致…

微知-如何临时设置Linux系统时间?(date -s “2024-10-08 22:55:00“, time, hwclock, timedatectl)

背景 在tar解压包的时候经常出现时间不对&#xff0c;可以临时用date命令修改一下&#xff0c;也可以其他&#xff0c;本文主要介绍临时修改的方法 date命令修改 sudo date -s "2024-10-08 22:55:00"其他查看和修改的命令 本文只记录查看方式&#xff0c;修改的暂…

mysql 查出数据是乱序的

在 MySQL 中&#xff0c;如果你发现查询出来的数据是乱序的&#xff0c;这通常是因为没有指定 ORDER BY 子句。SQL 查询的结果集默认是不保证排序顺序的&#xff0c;除非明确指定了排序规则。 以下是一些解决方法和考虑事项&#xff1a; 1. 使用 ORDER BY 子句 在查询时&…

详解正确创建好SpringBoot项目后但是找不到Maven的问题

目录 问题 解决步骤&#xff1a; 找到File->Project Structure... 设置SDK 设置SDKs 问题 刚刚在使用IDEA专业版创建好SpringBoot项目后&#xff0c;发现上方导航栏的运行按钮是灰色的&#xff0c;而且左侧导航栏的pom.xml的图标颜色也不是正常的&#xff0c;与此同时我…

SpringBoot Jar 包加密防止反编译

今天看到了一个说明jar包加密的实现方式&#xff0c;特意试了下效果&#xff0c;并下载了插件源码及实现源码查看了下子&#xff0c;感兴趣的可以在最后得到gitee地址。 SpringBoot 程序 Jar 包加密的方式&#xff0c;通过代码加密可以实现无法反编译。应用场景就是当需要把公司…

【AI知识点】词袋模型(Bag-of-Words,BOW)

词袋模型&#xff08;Bag-of-Words&#xff0c;简称BOW&#xff09;是一种用于文本表示的简单且常用的方法&#xff0c;尤其在自然语言处理&#xff08;NLP&#xff09;和信息检索领域中广泛应用。词袋模型的核心思想是将文本表示为一个词频统计的集合&#xff0c;而不考虑词的…

Draw a triangle

Problem - E - Codeforces 题意:给定两个点的坐标求第三个点并且使得三个点围成的三角形面积最小&#xff1b; 这道题涉及了很多知识点&#xff1a; 1.在二维空间中&#xff0c;两个向量a,b叉乘&#xff0c;|a*b|在数值上等于以向量a和向量b为邻边构成的平行四边形的面积&am…

【Java】异常的处理-方式【主线学习笔记】

文章目录 前言1、处理概述2、Java异常处理机制&#xff08;方式&#xff09;方式一&#xff08;抓抛模型&#xff09;&#xff1a;try-catch-finally方式二&#xff1a;throws 异常类型总结 前言 Java是一门功能强大且广泛应用的编程语言&#xff0c;具有跨平台性和高效的执行…

螺蛳壳里做道场:老破机搭建的私人数据中心---Centos下Docker学习03(网络及IP规划)

3 网络及IP规划 3.1 容器连接网络初步规划 规划所有容器与虚拟机的三张网卡以macvlan的方式进行连接&#xff08;以后根据应用可以更改&#xff09;&#xff0c;在docker下创建nat、wifi、nei、wai四张网卡&#xff0c;他们和虚拟机及宿主机上NIC的相关连接参数如下表所示&am…

Linux防火墙-案例(二)snatdnat

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 我们经过上小章节讲了Linux的部分进阶命令&#xff0c;我们接下来一章节来讲讲Linux防火墙。由于目前以云服务器为主&#x…

脑机接口技术的未来与现状:Neuralink、机械手臂与视觉假体的突破

近年来&#xff0c;脑机接口&#xff08;BCI&#xff09;技术发展迅速&#xff0c;不仅限于科幻小说和电影&#xff0c;已经逐步进入现实应用。特别是马斯克的Neuralink公司推出的“盲视&#xff08;Blindsight&#xff09;”设备&#xff0c;最近获得了FDA的突破性设备认定&am…

Spring Boot:打造下一代医院管理系统

3系统分析 3.1可行性分析 通过对本医院管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本医院管理系统采用JAVA作为开发语言&#xff0c;Spring Boot框…

动态规划算法题目练习——62.不同路径

1.题目解析 题目来源&#xff1a;62.不同路径——力扣 测试用例 2.算法原理 1.状态表示 这时由于避免越界初始化所以将左上角置为虚拟位置&#xff0c;创建一个二维dp表用来存储到当前为止的所有路径 2.状态转移方程 以dp[i,j]为例&#xff0c;起点到该位置的路径是起点到其上…

费曼学习法没有输出对象怎么办?

‌费曼学习法并不需要输出对象。‌费曼学习法的核心在于通过将所学知识以简明易懂的方式解释给自己听&#xff0c;从而加深对知识的理解和记忆。这种方法强调的是理解和反思的过程&#xff0c;而不是简单地通过输出&#xff08;如向他人解释&#xff09;来检验学习效果。费曼学…

YOLO 二元分类器

YOLO 二元分类器 在评估二元分类器性能时&#xff0c;TP、FP、TN和FN是四个核心指标&#xff0c;它们分别代表真阳性、假阳性、真阴性和假阴性。以下是这些指标的定义、计算方法以及在实际应用中的意义&#xff1a; 定义 TP&#xff08;真阳性&#xff09;&#xff1a;模型正…

找不到concrt140.dll如何修复,快来试试这6种解决方法

concrt140.dll是微软Visual C 2015 Redistributable Package中的一个重要动态链接库文件&#xff0c;它在许多Windows应用程序中扮演着关键角色。本文将详细探讨concrt140.dll丢失的原因、影响、解决方法以及预防措施&#xff0c;帮助用户更好地理解和应对这一问题。 一、什么是…

【Verilog学习日常】—牛客网刷题—Verilog进阶挑战—VL45

异步FIFO 描述 请根据题目中给出的双口RAM代码和接口描述&#xff0c;实现异步FIFO&#xff0c;要求FIFO位宽和深度参数化可配置。 电路的接口如下图所示。 双口RAM端口说明&#xff1a; 端口名 I/O 描述 wclk input 写数据时钟 wenc input 写使能 waddr input 写…

算法知识点————贪心

贪心&#xff1a;只考虑局部最优解&#xff0c;不考虑全部最优解。有时候得不到最优解。 DP&#xff1a;考虑全局最优解。DP的特点&#xff1a;无后效性&#xff08;正在求解的时候不关心前面的解是怎么求的&#xff09;&#xff1b; 二者都是在求最优解的&#xff0c;都有最优…

WPF下使用FreeRedis操作RedisStream实现简单的消息队列

Redis Stream简介 Redis Stream是随着5.0版本发布的一种新的Redis数据类型: 高效消费者组:允许多个消费者组从同一数据流的不同部分消费数据,每个消费者组都能独立地处理消息,这样可以并行处理和提高效率。 阻塞操作:消费者可以设置阻塞操作,这样它们会在流中有新数据…