SVG和Canvas的使用(3)_H5之家 - 中国HTML5教程资源分享第一站

1. 新建HTML页面

<html> <head></head> <body></body> </html> 2. 在body 标签内新建Canvas : <SVG id="MySVG" width="500px" height="500px" style="border:1px solid black;"> </SVG > Lab2.1 画出多种形状代码： <svg width="205" height="200">  <rect x="0" y="0" width="205" height="200" style="fill: rgb(199, 240, 185);"> </rect>   <rect x="78" y="10" width="44" height="70" style="fill: black; stroke: black; "></rect> <ellipse cx="100" cy="20" rx="67" ry="12" stroke="white" stroke-width="0.5" fill="black"></ellipse>   <ellipse cx="55" cy="70" rx="25" ry="25" stroke="black" stroke-width="2" fill="gray"></ellipse>  <ellipse cx="145" cy="70" rx="25" ry="25" stroke="black" stroke-width="2" fill="gray"></ellipse>  <circle cx="100" cy="105" r="50" stroke="black" stroke-width="2" fill="rgb(230, 231, 194)" />  <ellipse cx="75" cy="95" rx="10" ry="20" style="fill:white;stroke:black;stroke-width:1" />  <ellipse cx="80" cy="95" rx="5" ry="12" style="fill:black;stroke:black;stroke-width:1" />  <ellipse cx="125" cy="95" rx="10" ry="20" style="fill:white;stroke:black;stroke-width:1" />  <ellipse cx="120" cy="95" rx="5" ry="12" style="fill:black;stroke:black;stroke-width:1" />  <clipPath id="cut-off-bottom"> <rect x="70" y="135" width="60" height="30" /> </clipPath> <ellipse cx="100" cy="125" rx="30" ry="20" clip-path="url(#cut-off-bottom)" style="fill:rgb(230, 231, 194);stroke:black;stroke-width:2" />   <polygon points="100,115 85,125 115,125" style="fill: brown; stroke-width: 1" />  <line x1="0" y1="165" x2="205" y2="165" style="stroke:brown; stroke-width:2" /> <text x="25" y="185" font-family="Comic Sans MS'" fill="Blue" >A coder can be creative</text> </svg>

输出：

Lab 2.2SVG 动画

SVG 使得动画制作变得简单：

初始化设置：