当前位置: 首页 > java >正文

【前端:Html】--3.进阶:图形

目录

1.HTML 画布--canvas

1.1.什么是 Canvas

1.2.浏览器支持

1.3.Canvas 实例

1.4.添加 JavaScript

2.HTML 画布--canvas

2.1.绘画过程

2.2.绘制文本

2.3.绘制图像

3.HTML SVG 矢量图

什么是 SVG?

3.1.SVG 文本--text

3.2.SVG 圆--circle

3.3.SVG矩形--rect

3.4.SVG 星形--polygon

3.5.SVG Logo--linearGradient


1.HTML 画布--canvas

HTML <canvas> 元素用于在网页上绘制图形。

左边的图形是用 <canvas> 创建的。它显示四个元素:红色矩形、渐变矩形、多色矩形和多色文本。

1.1.什么是 Canvas

HTML5 的 <canvas> 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

1.2.浏览器支持

表中的数字指定完全支持 <canvas> 元素的第一个浏览器版本.

1.3.Canvas 实例

画布是 HTML 页面上的矩形区域。默认情况下,画布没有边框和内容。

下面是一个基本的空画布示例:

<!DOCTYPE html>
<html>
<body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML canvas 标签。
</canvas></body>
</html>

1.4.添加 JavaScript

创建矩形画布区域后,必须添加 JavaScript 来完成图形。

以下是一些实例:

<!DOCTYPE html>
<html>
<body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML canvas 标签。</canvas><script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script></body>
</html>

2.HTML 画布--canvas

2.1.绘画过程

使用 JavaScript 在画布上绘图

HTML 画布上的所有绘图都必须使用 JavaScript 完成:

第1步: 找到 Canvas 画布元素

首先,必须找到 <canvas> 元素。

通过使用HTML DOM的 getElementById() 方法完成:

var canvas = document.getElementById("myCanvas");


第2步: 创建绘图对象

其次,画布需要一个绘图对象。

使用一个内置的HTML对象 getContext(),它具有用于绘图的属性和方法:

var ctx = canvas.getContext("2d");


Step 3: 在画布上绘图

最后,你可以在在画布上绘图。

将图形对象的填充样式设置为红色:

ctx.fillStyle = "#FF0000";

fillStyle 属性可以是CSS颜色、渐变色或图案。默认填充样式为黑色。

fillRect(x,y,width,height) 方法在画布上绘制一个用填充样式填充的矩形:

ctx.fillRect(0, 0, 150, 75);

<!DOCTYPE html>
<html>
<body><canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
您的浏览器不支持 canvas 元素。
</canvas><script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script></body>
</html>

2.2.绘制文本

<!DOCTYPE html>
<html>
<body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML canvas 标签。</canvas><script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script></body>
</html>

2.3.绘制图像

<!DOCTYPE html>
<html>
<body><p>要使用的图片:</p>
<img id="scream" src="img_the_scream.jpg" alt="呐喊" width="220" height="277"><p>要填充的画布:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML canvas 标签。</canvas><p><button onclick="myCanvas()">试一试</button></p><script>
function myCanvas() {var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var img = document.getElementById("scream");ctx.drawImage(img,10,10);
}
</script></body>
</html>

3.HTML SVG 矢量图

 ​​Scalable Vector Graphics​​(可缩放矢量图形)

什么是 SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

HTML <svg> 元素是 svg 图形的容器。

SVG 有几种绘制路径、方框、圆、文本和图形图像的方法。

3.1.SVG 文本--text

<!DOCTYPE html>
<html>
<body><svg height="60" width="200"><text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>抱歉,您的浏览器不支持内联 SVG。
</svg></body>
</html>

3.2.SVG 圆--circle

<!DOCTYPE html>
<html>
<body><svg width="100" height="100"><circle cx="50" cy="50" r="40"stroke="green" stroke-width="4" fill="yellow" />
抱歉,您的浏览器不支持内联 SVG。
</svg></body>
</html>

3.3.SVG矩形--rect

rectangle:n.长方形;矩形

<!DOCTYPE html>
<html>
<body><svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
抱歉,您的浏览器不支持内联 SVG。
</svg></body>
</html>

圆角矩形:

<svg width="400" height="180"><rect x="50" y="20" rx="20" ry="20" width="150" height="150"style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

3.4.SVG 星形--polygon

polygon:n.多边形;多角形

<!DOCTYPE html>
<html>
<body><svg width="300" height="200"><polygon points="100,10 40,198 190,78 10,78 160,198"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
抱歉,您的浏览器不支持内联 SVG。
</svg></body>
</html>

3.5.SVG Logo--linearGradient

<defs>是 SVG(可缩放矢量图形)中的一个重要容器元素,全称为 ​​Definitions​​(定义)。它的主要作用是​​存储需要复用的图形元素​​,这些元素本身不会直接显示在画布上,只有在被其他元素引用时才会生效。

<!DOCTYPE html>
<html>
<body><!-- SVG图形容器:设置宽度500像素,高度130像素 -->
<svg height="130" width="500"><!-- 定义可重用的图形元素(此处定义渐变) --><defs><!-- 线性渐变定义,id为"grad1",从左(0%)到右(100%)的水平渐变 --><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><!-- 渐变起点(左侧):黄色(RGB 255,255,0),完全不透明 --><stop offset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1" /><!-- 渐变终点(右侧):红色(RGB 255,0,0),完全不透明 --><stop offset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1" /></linearGradient></defs><!-- 椭圆图形:使用id为grad1的渐变填充 --><ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /><!-- 文字元素:白色、45像素大小、Verdana字体 --><text fill="#ffffff" font-size="45" font-family="Verdana"x="50" y="86">SVG</text><!-- 浏览器不支持SVG时的后备文本 -->抱歉,您的浏览器不支持内联 SVG。
</svg></body>
</html>

CanvasSVG
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用
http://www.xdnf.cn/news/17732.html

相关文章:

  • c#联合Halcon进行OCR字符识别(含halcon-25.05 百度网盘)
  • 解决H616用网络的IP地址连不上
  • 考研复习-计算机组成原理-第五章-CPU
  • MySQL User表入门教程
  • 计算机视觉(7)-纯视觉方案实现端到端轨迹规划(思路梳理)
  • 从爬虫新手到DrissionPage实践者的技术旅程
  • MCU中的液晶显示屏LCD(Liquid Crystal Display)控制器
  • Unity UnityWebRequest常用操作
  • 使用pyqt5实现可勾选的测试用例界面
  • 99、【OS】【Nuttx】【构建】cmake 配置实操:问题解决
  • 【模型剪枝2】不同剪枝方法实现对 yolov5n 剪枝测试及对比
  • Linux,docker知识补充
  • 自建知识库,向量数据库 体系建设(二)之BERT 与.NET 8
  • C++少儿编程(二十二)—条件结构
  • 通过限制对象的内存分配位置来实现特定的设计目标
  • powerbi本地报表发布到web,以得到分享链接
  • Day13 Vue工程化
  • SQL 语言分类
  • 人大BABEC地平线高效率具身导航!Aux-Think:探索视觉语言导航中数据高效的推理策略
  • @RequestMapping接收文件格式的形参(方法参数)
  • idea git commit特别慢,cpu100%
  • 13.深度学习——Minst手写数字识别
  • 嵌入式第二十六天(文件IO相关操作)
  • 基于PROFINET的西门子PLC通讯:S7-200与S7-1200在自动化仓储中的协同应用
  • NetworkManager配置热点
  • 6深度学习Pytorch-神经网络--过拟合欠拟合问题解决(Dropout、正则化、早停法、数据增强)、批量标准化
  • Qt树形控件QTreeWidget详解:构建可编辑的多级课程结构
  • 牛客疑难题(6)
  • 需求沟通会议如何组织
  • 呼吸道病原体检测需求激增,呼吸道快检试纸条诊断试剂生产厂家推荐,默克全链解决方案助IVD企业把握百亿风口