【前端: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>
| Canvas | SVG |
|---|---|
|
|