HTML5 学习笔记DAY1（2）

最新推荐文章于 2022-04-18 10:46:23 发布

using131

最新推荐文章于 2022-04-18 10:46:23 发布

阅读量179

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/using131/article/details/108466589

版权

HTML5新元素

一. canvas

标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API，必须使用脚本来绘制图形

1.定义：

HTML5 canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
canvas 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

2.创建画布：

一个画布在网页中是一个矩形框，通过 canvas 元素来绘制.

注意: 默认情况下元素没有边框和内容。

在这里插入图片描述

3.使用 JavaScript 来绘制图像

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

在这里插入图片描述
4.Canvas 坐标

canvas 是一个二维网格。 canvas 的左上角坐标为 (0,0) 上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。
在这里插入图片描述
5. Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标 lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 “ink” 的方法，就像stroke()

在这里插入图片描述
.在canvas中绘制圆形, 我们将使用以下方法:

arc(x,y,r,start,stop)

在这里插入图片描述

6.Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体 fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本使用 fillText():

使用 fillText():
在这里插入图片描述

使用 strokeText():

在这里插入图片描述
7.Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():
在这里插入图片描述
使用 createRadialGradient():

8.Canvas图像

把一幅图像放置到画布上, 使用以下方法: drawImage(image,x,y)

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");

img.onload = function() {
	ctx.drawImage(img,10,10);
} 
</script>

</body>
</html>

附：HTML Canvas参考手册：

https://www.runoob.com/tags/ref-canvas.html

二.HTML5 内联 SVG

1. 什么是SVG？

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

2. SVG优势

与其他图像格式相比，使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

3.在 HTML5 中能够将 SVG 元素直接嵌入 HTML 页面中：

在这里插入图片描述
4.SVG 与 Canvas两者间的区别

①SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
②SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
③在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
④Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

5.Canvas 与 SVG 的比较
在这里插入图片描述

三：HTML5 MathML

HTML5 可以在文档中使用 MathML 元素，对应的标签是 … 。 MathML
是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

举例： 2×2 矩阵

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鸟教程(runoob.com)</title>
   </head>
    
   <body>
      <math xmlns="http://www.w3.org/1998/Math/MathML">
        
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
            
            <mfenced open="[" close="]">
            
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
                    
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>
      
   </body>
</html>