HTML5+CSS3-充实笔记0614

186

收藏 2019-06-14

4.9Canvas实现动画效果

清除Canvas的内容：
ctx.filleStyle="blue";
ctx.fillRect(0, 0, 400, 200);
ctx.clearRect(50, 50,150,100);

创建动画
动画的开始与停止：
<button>开始</button>
<button>停止</button>
设置实践间隔为10ms，并用变量tt接收返回值。

更多的JavaScript代码，另行学习。

ch5. HTML5 SVG

SVG是一种矢量图像，不同于一般的矢量图像，具有XML的属性，且只需要一个SVG元素就可以完成一幅图像的绘制
（scalable Vector Graphics）
一种用来绘制矢量图的HTML5标签，由万维网联盟指定，基于一种可扩展标记语言，用于绘制二维可缩放矢量图形

允许三种类型的图形对象：矢量图形、图像、文本。
图像在放大或缩小的情况下，图形质量不会有损失。

优势：

读取和编辑的优势（记事本也可以读取）

与JPEG和GIF图像相比，尺寸更小，可压缩性更强。
在任何分辨率下被高质量打印。
可伸缩的矢量图形
放大和缩小情况下，图像质量不会下降
可以与Java技术一起运行
开放的标准
是一种XML文本

示例一：将SVG直接嵌入HTML5页面中

<!DOCTYPE html>
<html>
<head>
   <title>5.2.1.html</title>
   <meta charset="utf-8">
</head>
<body>
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
   </svg>
</body>
</html>