三天学会HTML5——SVG和Canvas的使用
来源:互联网 发布:对软件验收标准 编辑:程序博客网 时间:2024/06/06 16:48
转载自:http://blog.csdn.net/powertoolsteam/article/details/50633556
在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习
首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容。
第2天将学习如何使用Canvas 和使用SVG 实现功能
Lab1—— 使用Canvas
Canvas 是指定了长度和宽度的矩形画布,我们将使用新的HTML5 JavaScript,可使用HTML5 JS API 来画出各种图形。
初始化
1. 创建HTML页面
<span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">html</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span><span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">head</span><span class="kwrd" style="color: rgb(0, 0, 255);">></</span><span class="html" style="color: rgb(128, 0, 0);">head</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span><span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">body</span><span class="kwrd" style="color: rgb(0, 0, 255);">></</span><span class="html" style="color: rgb(128, 0, 0);">body</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span><span class="kwrd" style="color: rgb(0, 0, 255);"></</span><span class="html" style="color: rgb(128, 0, 0);">html</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span>
2. 在Body标签内添加Canvas
<canvas id=<span class="str" style="color: rgb(0, 96, 128);">"MyCanvas"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"500px"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"500px"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"border:1px solid black;"</span>></canvas>
3. 在<head>标签内添加Script 标签
<head><script type=<span class="str" style="color: rgb(0, 96, 128);">"text/javascript"</span>></script></head>
4. 在Script 标签内创建JavaScript 函数 Draw ,Draw函数能够访问Canvas 对象
function Draw(){ var ctx = document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">'MyCanvas'</span>).getContext(<span class="str" style="color: rgb(0, 96, 128);">"2d"</span>); <span class="rem" style="color: rgb(0, 128, 0);">//Canvas Code Comes Here</span>}
Lab 1.1 使用 Path
Path 由0个或多个Sub Path组成,每个Sub path 是是由一个或多个终点组成,每个终点是通过直线或曲线连接的。
Lab1.1.1 使用Single 创建Path;
脚本片段:
ctx.beginPath();ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>;ctx.moveTo(75, 50);ctx.lineTo(75, 100);ctx.stroke();ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"red"</span>;ctx.lineTo(25, 100);ctx.stroke();
输出:
上述示例中Path 是由2个子路径组成的。
BeginPath—— 创建新路径
strokeStyle 用于设置样式
每次调用Stroke 方法,所有的子路径都会使用当前的Style 重新画。
Lab 1.1.2 使用Multiple Begin Path创建Path
核心代码:
ctx.beginPath();ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>;ctx.moveTo(75, 50);ctx.lineTo(75, 100);ctx.stroke();ctx.beginPath();ctx.moveTo(75, 100);ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"red"</span>;ctx.lineTo(25, 100);ctx.stroke();
输出:
Lab1.1.3 理解ClosePath
核心代码:
ctx.beginPath();ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>;ctx.moveTo(75, 50);ctx.lineTo(75, 100);ctx.lineTo(25, 100);ctx.closePath();ctx.stroke();
输出:
Lab1.1.4 理解Fill
核心代码
ctx.beginPath();ctx.moveTo(75, 50);ctx.lineTo(75, 100);ctx.lineTo(25, 100);ctx.fillStyle = <span class="str" style="color: rgb(0, 96, 128);">"red"</span>;ctx.fill();
输出:
Lab1.1.5 画曲线
quadraticCurveTo 函数定义了四个参数,前两个点是控制点,用于曲率计算,后两个参数是终点的曲度核心代码:
ctx.beginPath();ctx.moveTo(175, 50)ctx.quadraticCurveTo(60, 360, 175, 300);ctx.stroke()
输出:
Lab 1.2 使用Rectangle
Lab1.2.1 画矩形
ctx.fillStyle=<span class="str" style="color: rgb(0, 96, 128);">"red"</span>;ctx.fillRect(75, 75, 150, 150); ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"black"</span>;ctx.lineWidth = 5;ctx.strokeRect(175,175,150,150);
输出:
Lab1.2.2 清除矩形
代码:
ctx.fillStyle=<span class="str" style="color: rgb(0, 96, 128);">"red"</span>;ctx.fillRect(75, 75, 250, 250);ctx.clearRect(125, 125, 100, 100);
输出
Lab 1.3 使用渐变色
Lab1.3.1 使用线性渐变色
var grd = ctx.createLinearGradient(75, 75, 225, 75);grd.addColorStop(0, <span class="str" style="color: rgb(0, 96, 128);">"black"</span>);grd.addColorStop(0.2, <span class="str" style="color: rgb(0, 96, 128);">"magenta"</span>);grd.addColorStop(0.4, <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>);grd.addColorStop(0.6, <span class="str" style="color: rgb(0, 96, 128);">"green"</span>);grd.addColorStop(0.8, <span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>);grd.addColorStop(1, <span class="str" style="color: rgb(0, 96, 128);">"red"</span>);ctx.fillStyle = grdctx.fillRect(75, 75, 150, 150);
输出
注意:
reateLinearGradient 包含四个参数x1,y1,x2,y2
1. 如果x1=x2 并且y1!=y2,渐变色改变的方向则是水平。
2. 如果y1=y2 并且x1!=x2, 渐变色方向是垂直的。
3. 如果x1!=x2且y1!=y2,渐变色方向则为对角。
AddColorStop 函数包含两个参数。
1. 0到1 之间的数字,用来表示渐变色起始和终点的位置。
2. Color;
Lab1.3.2 使用圆形渐变
代码:
var grd = ctx.createRadialGradient(150, 150, 5, 150, 150,85);grd.addColorStop(0, <span class="str" style="color: rgb(0, 96, 128);">"orange"</span>);grd.addColorStop(0.2, <span class="str" style="color: rgb(0, 96, 128);">"magenta"</span>);grd.addColorStop(0.4, <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>);grd.addColorStop(0.6, <span class="str" style="color: rgb(0, 96, 128);">"green"</span>);grd.addColorStop(0.8, <span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>);grd.addColorStop(1, <span class="str" style="color: rgb(0, 96, 128);">"red"</span>);ctx.fillStyle = grdctx.fillRect(75, 75, 150, 150);
输出
CreateRadialGradiant包含6个参数,x1,y1,r1,x2,y2,r2
1, x1,y1,r1代表开始圆形的圆心和半径
2. x2,y2,r2 表示结束圆的圆心和半径
Lab 1.4 使用圆形
核心代码:
ctx.beginPath();ctx.fillStyle=<span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>;ctx.strokeStyle=<span class="str" style="color: rgb(0, 96, 128);">"green"</span>;ctx.lineWidth = <span class="str" style="color: rgb(0, 96, 128);">"8"</span>;ctx.arc(100, 175, 85, 0, 2*Math.PI);ctx.fill();ctx.stroke();ctx.beginPath();ctx.fillStyle = <span class="str" style="color: rgb(0, 96, 128);">"green"</span>;ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>;ctx.lineWidth = <span class="str" style="color: rgb(0, 96, 128);">"8"</span>;ctx.arc(285, 175, 85, 0, 1 * Math.PI);ctx.fill();ctx.stroke();
输出:
DrawArc 函数包含5个参数,x,y,r,sa,ea
x 和y 表示圆心
r表示半径
sa 和ea 是开始边缘和结束边缘
Lab1.5 使用Text
代码:
ctx.beginPath();ctx.font = "30px Segoe UI";ctx.fillText("www.StepByStepSchools.Net",0, 150);
输出:
fillText/stokeText具有三个参数
1. 实际输出的文本
2. x,y 是可选值。
Lab 1.6 Scale
ctx.strokeRect(75, 75, 75, 75);ctx.scale(2,2);ctx.strokeRect(75, 75, 75, 75);
输出:
Lab 1.7 旋转
代码片段:
ctx.rotate(0.2);ctx.strokeRect(75, 75, 75, 75);
输出:
Lab 1.8 转换
代码:
ctx.strokeRect(0, 0, 150, 150);ctx.translate(150, 150);ctx.strokeRect(0, 0, 150, 150);
输出:
Lab 1.9 保存和重置Canvas 的状态
ctx.fillStyle=<span class="str" style="color: rgb(0, 96, 128);">"red"</span>;ctx.fillRect(75, 75, 150, 150);ctx.fillStyle = <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>; ctx.fillRect(90, 90, 50, 50);ctx.save();ctx.fillStyle = <span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>;ctx.fillRect(90, 160, 50, 50);ctx.save();ctx.fillStyle = <span class="str" style="color: rgb(0, 96, 128);">"green"</span>;ctx.restore();ctx.restore();ctx.fillRect(160, 160, 50, 50);
输出
Lab 1.10 使用图像
vari = <span class="kwrd" style="color: rgb(0, 0, 255);">new</span> Image();i.src = <span class="str" style="color: rgb(0, 96, 128);">"Desert.jpg"</span>;i.onload = function () { <span class="rem" style="color: rgb(0, 128, 0);">//Draw Squqre</span>ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"green"</span>;ctx.lineWidth = 5;ctx.drawImage(i, 0, 0);ctx.strokeRect(60, 120, 70, 80); <span class="rem" style="color: rgb(0, 128, 0);">//draw Text</span>ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>;ctx.font = <span class="str" style="color: rgb(0, 96, 128);">"30px Segoe UI"</span>;ctx.lineWidth = 1;ctx.strokeText(<span class="str" style="color: rgb(0, 96, 128);">"My Home"</span>, 80, 40); <span class="rem" style="color: rgb(0, 128, 0);">//Draw Arrow</span>ctx.beginPath();ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"red"</span>;ctx.lineWidth = 2;ctx.moveTo(110, 110);ctx.lineTo(125, 40);ctx.moveTo(110, 110);ctx.lineTo(100, 90);ctx.moveTo(110, 110);ctx.lineTo(126, 95);ctx.stroke();};
输出:
Lab1.11 使用Canvas 生成动画
一旦在Canvas 填充好东西就无法修改,可采用以下方法来修改:
1. 使用ClearRect 函数删除存在的元素
2. 添加新属性重画元素
当以上策略与传统的JS 函数结合,可使用TimeOut 或SetInterval 方法来实现,可产生动画。
代码:
var interval;var x = 0, y = 0;functiondrawInAnimation(){varctx = document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">'MyCanvas'</span>).getContext(<span class="str" style="color: rgb(0, 96, 128);">"2d"</span>);ctx.beginPath();ctx.moveTo(x, y);ctx.clearRect(x , y, 50, 50);<span class="kwrd" style="color: rgb(0, 0, 255);">if</span> (x >document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">'MyCanvas'</span>).width) { x = 0; y += 50;<span class="kwrd" style="color: rgb(0, 0, 255);">if</span> (y + 50 >document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">'MyCanvas'</span>).height) { x = 0; y = 0; } }<span class="kwrd" style="color: rgb(0, 0, 255);">else</span> { x += 15; }ctx.fillStyle = getRndColor();ctx.fillRect(x, y,50,50);}functiongetRndColor() {var r = 255 * Math.random() | 0, g = 255 * Math.random() | 0, b = 255 * Math.random() | 0; <span class="kwrd" style="color: rgb(0, 0, 255);">return</span> <span class="str" style="color: rgb(0, 96, 128);">'rgb('</span> + r + <span class="str" style="color: rgb(0, 96, 128);">','</span> + g + <span class="str" style="color: rgb(0, 96, 128);">','</span> + b + <span class="str" style="color: rgb(0, 96, 128);">')'</span>;}interval = setInterval(<span class="str" style="color: rgb(0, 96, 128);">"drawInAnimation()"</span>, 15);
输出:
Lab 2 使用SVG 工作
如Canvas,SVG 支持在矩形中画图像,接下来将了解到Canvas 与SVG 的区别。
初始化
1. 新建HTML页面
<html><head></head><body></body></html>
2. 在body 标签内新建Canvas :
<SVG id=<span class="str" style="color: rgb(0, 96, 128);">"MySVG"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"500px"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"500px"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"border:1px solid black;"</span>></SVG >
Lab2.1 画出多种形状
代码:
<svg width=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"200"</span>> <!--surrounding border--> <rect x=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"200"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill: rgb(199, 240, 185);"</span>> </rect> <!--surrounding border--> <!--Hat Start--> <rect x=<span class="str" style="color: rgb(0, 96, 128);">"78"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"10"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"44"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"70"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill: black; stroke: black; "</span>></rect> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"100"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"67"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"12"</span> stroke=<span class="str" style="color: rgb(0, 96, 128);">"white"</span> stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"0.5"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"black"</span>></ellipse> <!--Hat End--> <!--Left ear--> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"55"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"70"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> stroke=<span class="str" style="color: rgb(0, 96, 128);">"black"</span> stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"2"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"gray"</span>></ellipse> <!--Right ear--> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"145"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"70"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> stroke=<span class="str" style="color: rgb(0, 96, 128);">"black"</span> stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"2"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"gray"</span>></ellipse> <!--Face--> <circle cx=<span class="str" style="color: rgb(0, 96, 128);">"100"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"105"</span> r=<span class="str" style="color: rgb(0, 96, 128);">"50"</span> stroke=<span class="str" style="color: rgb(0, 96, 128);">"black"</span> stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"2"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"rgb(230, 231, 194)"</span> /> <!--Left Eye--> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"75"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"10"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill:white;stroke:black;stroke-width:1"</span> /> <!--Left Eye ball--> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"80"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"5"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"12"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill:black;stroke:black;stroke-width:1"</span> /> <!--Right Eye--> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"10"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill:white;stroke:black;stroke-width:1"</span> /> <!--Right Eye ball--> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"120"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"5"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"12"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill:black;stroke:black;stroke-width:1"</span> /> <!--Mouth start--> <clipPath id=<span class="str" style="color: rgb(0, 96, 128);">"cut-off-bottom"</span>> <rect x=<span class="str" style="color: rgb(0, 96, 128);">"70"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"60"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"30"</span> /> </clipPath> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"100"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"30"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> clip-path=<span class="str" style="color: rgb(0, 96, 128);">"url(#cut-off-bottom)"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill:rgb(230, 231, 194);stroke:black;stroke-width:2"</span> /> <!--Mouth End--> <!--Nose--> <polygon points=<span class="str" style="color: rgb(0, 96, 128);">"100,115 85,125 115,125"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill: brown; stroke-width: 1"</span> /> <!--Divider--> <line x1=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> y1=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> x2=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> y2=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"stroke:brown;stroke-width:2"</span> /> <text x=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"185"</span> font-family=<span class="str" style="color: rgb(0, 96, 128);">"Comic Sans MS'"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"Blue"</span> >A coder can be creative</text></svg>
输出:
Lab 2.2SVG 动画
SVG 使得动画制作变得简单:
初始化设置:
<svg width=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"220"</span>> <rect x=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"220"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill: rgb(199, 240, 185);"</span>> </rect>....</svg>
眨眼动画:
<!--Left Eye--> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"75"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"15"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"15"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill:white;stroke:black;stroke-width:1"</span> /> <!--Left Eye ball--> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"75"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"5"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"5"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill:black;stroke:black;stroke-width:1"</span>> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"75"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"85"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Left1"</span> repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"1"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"0s;Left5.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"85"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Left1.end"</span> /> <animateTransform attributeName=<span class="str" style="color: rgb(0, 96, 128);">"transform"</span> type=<span class="str" style="color: rgb(0, 96, 128);">"rotate"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Left2"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"0 75 95"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"360 75 95"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Left1.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"3"</span>> </animateTransform> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"85"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"65"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Left3"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Left2.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"65"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Left3.end"</span> /> <animateTransform attributeName=<span class="str" style="color: rgb(0, 96, 128);">"transform"</span> type=<span class="str" style="color: rgb(0, 96, 128);">"rotate"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Left4"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"360 75 95"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"0 75 95"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Left3.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"3"</span>> </animateTransform> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"65"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"75"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Left5"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Left4.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"75"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Left4.end"</span> > </set> </ellipse>
<!--Right Eye--> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"15"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"15"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill:white;stroke:black;stroke-width:1"</span> /> <!--Right Eye ball--> <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"5"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"5"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill:black;stroke:black;stroke-width:1"</span>> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Right1"</span> repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"1"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"0s;Right5.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Right1.end"</span> /> <animateTransform attributeName=<span class="str" style="color: rgb(0, 96, 128);">"transform"</span> type=<span class="str" style="color: rgb(0, 96, 128);">"rotate"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Right2"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"0 125 95"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"360 125 95"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Right1.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"3"</span>> </animateTransform> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"115"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Right3"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Right2.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"115"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Right3.end"</span> /> <animateTransform attributeName=<span class="str" style="color: rgb(0, 96, 128);">"transform"</span> type=<span class="str" style="color: rgb(0, 96, 128);">"rotate"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Right4"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"360 125 95"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"0 125 95"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Right3.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"3"</span>> </animateTransform> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"115"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Right5"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Right4.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Right4.end"</span> /> </ellipse>
张嘴动画:
<clipPath id=<span class="str" style="color: rgb(0, 96, 128);">"cut-off-bottom"</span>> <rect x=<span class="str" style="color: rgb(0, 96, 128);">"70"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"60"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"11"</span>> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation1"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"0;MouthClipAnimation3.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"11"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"22"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation2"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"0;MouthClipAnimation4.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation1.end-0.1"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"22"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation2.end-0.1"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation3"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation1.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"22"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"11"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation4"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation2.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation3.end-0.1"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"11"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation4.end-0.1"</span> /> </rect></clipPath><ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"100"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"30"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> clip-path=<span class="str" style="color: rgb(0, 96, 128);">"url(#cut-off-bottom)"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill:rgb(230, 231, 194);stroke:black;stroke-width:2"</span>> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cy"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation1"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"0;MouthEllipseAnimation4.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"rx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"30"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation2"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"0;MouthEllipseAnimation5.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"ry"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation3"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"0;MouthEllipseAnimation6.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cy"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation1.end-0.1"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"rx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation2.end-0.1"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"ry"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation3.end-0.1"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cy"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation4"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation1.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"rx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"30"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation5"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation2.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"ry"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation6"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation3.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cy"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation4.end-0.1"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"rx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"30"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation5.end-0.1"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"ry"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation6.end-0.1"</span> /></ellipse>
盒子动画效果:
<!--Box Anmation--> <rect x=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"2"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"brown"</span>> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"width"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"210"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"leftToRight"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"0;bottomToTop.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"width"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"leftToRight.end-0.2"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"x"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"191"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"leftToRight.end-0.2"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"55"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"topToBottom"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"leftToRight.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"topToBottom.end-0.2"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"206"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"topToBottom.end-0.2"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"width"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"210"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"topToBottom.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"x"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"206"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"topToBottom.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"width"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft.end-0.2"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"x"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft.end-0.2"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"55"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"bottomToTop"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> from=<span class="str" style="color: rgb(0, 96, 128);">"206"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"bottomToTop"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"bottomToTop.end-0.2"</span> /> <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"bottomToTop.end-0.2"</span> /> </rect> <line x1=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> y1=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> x2=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> y2=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"stroke:brown;stroke-width:2"</span> /> <text x=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"200"</span> font-family=<span class="str" style="color: rgb(0, 96, 128);">"Comic Sans MS'"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"Blue"</span>>A coder can be creative</text>
输出
SVG VS Canvas
SVG 和Canvas 区别:
- Vector VS Pixel
Canvas 是基于Pixel 而SVG 是基于Vector
简单来说SVG图片是与屏幕分辨率无关的,而Canvas 不是。
- XML VS JavaScript
SVG使用语义标记可绘出图形,然而Canvas就只能使用JS脚本代码。
- 支持事件处理
Canvas 不支持事件处理,SVG 支持。
HTML
<svg width=<span class="str" style="color: rgb(0, 96, 128);">"120"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"120"</span>> <circle cx=<span class="str" style="color: rgb(0, 96, 128);">"60"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"60"</span> r=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> stroke=<span class="str" style="color: rgb(0, 96, 128);">"green"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MyCircle"</span> stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"yellow"</span> onmouseover=<span class="str" style="color: rgb(0, 96, 128);">"IncreaseSize();"</span> onmouseout=<span class="str" style="color: rgb(0, 96, 128);">"DecreaseSize();"</span> /> </svg><input type=<span class="str" style="color: rgb(0, 96, 128);">"button"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">value</span>=<span class="str" style="color: rgb(0, 96, 128);">"+"</span> onclick=<span class="str" style="color: rgb(0, 96, 128);">"ChangeSize();"</span>>
JavaScript
<script type=<span class="str" style="color: rgb(0, 96, 128);">"text/javascript"</span>> function IncreaseSize () { document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">"MyCircle"</span>).r.baseVal.<span class="kwrd" style="color: rgb(0, 0, 255);">value</span>=50; } function DecreaseSize() { document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">"MyCircle"</span>).r.baseVal.<span class="kwrd" style="color: rgb(0, 0, 255);">value</span> = 25; }</script>
输出
支持图片保存
Canvas 最后可输出为图像,可使用浏览器默认的选项将图像保存。而SVG 不支持。
- 三天学会HTML5——SVG和Canvas的使用
- 三天学会HTML5——SVG和Canvas的使用
- 三天学会HTML5——SVG和Canvas的使用
- 三天学会HTML5——SVG和Canvas的使用
- html5中的canvas和svg的使用
- 三天学会HTML5 ——多媒体元素的使用
- 三天学会HTML5 ——多媒体元素的使用
- html5中svg,canvas和图片之间的相互转化
- HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
- HTML 5 Canvas 和 HTML5 内联 SVG
- HTML5中Canvas与SVG的比较
- HTML5的图像系统Canvas与SVG
- HTML5中Canvas与SVG的画图
- SVG 与 HTML5 的 canvas 优缺点
- HTML5 SVG与Canvas的区别
- HTML5----Canvas VS SVG
- canvas和SVG的区别
- SVG和Canvas的区别
- 安装mongodb副本分片集群
- 串口自适应波特率的设置方法
- Java的反射(Reflection)、内省(Retrospector)和beanUtils工具
- html上的分享功能(jinthis)
- 《9》模版方法模式
- 三天学会HTML5——SVG和Canvas的使用
- Java回调函数使用
- 简单介绍redis以及ubuntu和windows下怎么安装redis和配置文件详解
- 112. Path Sum
- Android Studio Gradle
- 关于modbus
- 使用MD5对SharedPreference的重要数据进行加密
- 分解素因数 3
- ionic平台下的版本升级