三天学会HTML5——SVG和Canvas的使用(2)_H5之家 - 中国HTML5教程资源分享第一站

输出：

Lab 1.9 保存和重置Canvas 的状态 ctx.fillStyle="red"; ctx.fillRect(75, 75, 150, 150); ctx.fillStyle = "blue"; ctx.fillRect(90, 90, 50, 50); ctx.save(); ctx.fillStyle = "yellow"; ctx.fillRect(90, 160, 50, 50); ctx.save(); ctx.fillStyle = "green"; ctx.restore(); ctx.restore(); ctx.fillRect(160, 160, 50, 50);

输出

Lab 1.10 使用图像

vari = new Image(); i.src = "Desert.jpg"; i.onload = function () { //Draw Squqre ctx.strokeStyle = "green"; ctx.lineWidth = 5; ctx.drawImage(i, 0, 0); ctx.strokeRect(60, 120, 70, 80); //draw Text ctx.strokeStyle = "yellow"; ctx.font = "30px Segoe UI"; ctx.lineWidth = 1; ctx.strokeText("My Home", 80, 40); //Draw Arrow ctx.beginPath(); ctx.strokeStyle = "red"; 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('MyCanvas').getContext("2d"); ctx.beginPath(); ctx.moveTo(x, y); ctx.clearRect(x , y, 50, 50); if (x >document.getElementById('MyCanvas').width) { x = 0; y += 50; if (y + 50 >document.getElementById('MyCanvas').height) { x = 0; y = 0; } } else { 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; return 'rgb(' + r + ',' + g + ',' + b + ')'; } interval = setInterval("drawInAnimation()", 15);

输出：

Lab 2 使用SVG 工作

如Canvas,SVG 支持在矩形中画图像，接下来将了解到Canvas 与SVG 的区别。

初始化

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 使得动画制作变得简单：