核心代码：

ctx.beginPath(); ctx.fillStyle="yellow"; ctx.strokeStyle="green"; ctx.lineWidth = "8"; ctx.arc(100, 175, 85, 0, 2*Math.PI); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle = "green"; ctx.strokeStyle = "yellow"; ctx.lineWidth = "8"; 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("",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="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 的区别。

初始化