html入门教学(html5教程网)

html5 SVG动画路径
SVG动画可以使用元素来创建。
示例：
创建一个矩形，在3秒钟内改变它的位置，然后重复动画两次。
AttributeName:指定哪个属性需要被动画化。
From:指定属性的起始值。
To:指定属性的结束值。
Dur:指定动画运行的时间(持续时间)。
Fill=\’ frezee | remove \’ 3360指定动画是停留在播放的末尾，还是在播放后返回到开始位置。
RepeatCount:指定动画重复的次数。
在上面的示例中，矩形在3s内将其x属性从0更改为300。
要无限重复动画，请使用值“无限”作为repeatCount属性。
元素用于定义路径。
以下命令可用于路径数据：
M=移动到
L=lineto
H=水平线to
V=垂直线to
C=curveto
S=平滑曲线to
Q=二次贝塞尔曲线
T=平滑二次贝塞尔曲线to
A=椭圆弧
Z=闭合路径
注意，3360以上的所有命令都允许小写字母。大写字母表示绝对定位，小写字母表示相对定位
示例：
在上面的例子中，定义了一个路径，从150 0开始，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。
两张html5画布
Html5元素用于绘制图形，由脚本(通常是JavaScript)完成。
标签只是图形容器。你必须使用脚本来绘制图形。
getContext()方法可以返回一个对象，该对象提供在画布上绘画的方法和属性。
你可以用canvas画出路径、方框、圆圈、字符，并以多种方式添加图像。
元素定义如下：3360
标签通常需要指定一个id属性(经常在脚本中使用)，宽度和高度属性来定义画布的大小。
理解和使用Canvas需要JavaScript的基础知识。
画布是一个二维坐标
画布左上角的坐标是(0，0)
x坐标向右增加。
y坐标向画布底部增加。
画布路径
要在画布上画线，我们将使用以下两种方法：
moveTo(x，y)定义直线起始坐标。
lineTo(x，y)定义行尾坐标。
要在画布上画一个圆，我们将使用下面的方法：
弧线(x，y，开始，停止)
画布-文本
使用canvas绘制文本，重要的属性和方法如下：3360
字体-定义字体
fillText(text，x，y)-在画布上绘制实心文本。
strokeText(text，x，y)-在画布上绘制空心文本。
画布-渐变
渐变可以填充为矩形、圆形、线条、文本等。各种形状可以自己定义不同的颜色。
有两种不同的方法来设置画布梯度3360。
CreatelineGradient (x，y，x1，y1)-创建线条渐变。
creatradialgrade(x，y，r，x1，y1，R1)-创建径向/圆形渐变
当我们使用渐变对象时，我们必须使用两种或两种以上的停止色。
addColorStop()方法指定颜色停止，参数用坐标描述，可以是0到1。
使用gradient，将fillStyle或strokeStyle的值设置为gradient，然后绘制一个形状，如矩形、文本或线条。
Canva- image
在画布上放置一个图像，使用下面的方法3360。
drawImage(图像，x，y)
html5 SVG和Canvas的三个区别
SVG:
SVG是一种使用XML描述2D图形的语言
基于SVG XML，这意味着SVG DOM中的每个元素都是可用的。您可以将JavaScript事件处理程序附加到元素上
在SVG中，每一个绘制的图形都被视为一个对象。如果SVG对象的属性发生变化，浏览器可以自动重新生成图形。
特色：
独立于分辨率
支持事件处理程序
最适合具有大渲染区域的应用程序(如谷歌地图)
高复杂度会拖慢渲染速度(任何过度使用DOM的应用都不快)
不适合游戏应用
Canvas:
Canvas通过JavaScript绘制2D图形。
画布可以逐像素渲染。
在canvas中，图形一旦被绘制，就不会继续得到浏览器的关注。
如果它的位置改变，整个场景需要重新开始，包括任何可能被图像覆盖的对象。
特色：
取决于分辨率
不支持事件处理程序。
文字渲染能力弱
能够保存结果图像。png或者。ipg格式
最适合图像密集型游戏，其中会频繁重绘很多对象。