第五章：HTML5的图像及动画
1.一个简单的canvas画图实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function drawRectangle()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.strokeStyle="#66";
context.strokeRect(50,50,100,80);
}
</script>
<fieldset>
<legend>绘制矩形</legend>
<canvas id="myCanvas" width="200px" height="200px">
</canvas>
<br>
<button onclick="drawRectangle()">绘图</button>
</fieldset>
</body>
</html>
2.理解canvas的坐标系
canvas元素构建的画布是一个基于二维(x,y)的网络。
坐标原点(0，0)位于canvas的左上角。
从原点沿x轴从左往右，取值依次增加。
从原点沿y轴从上往下，取值依次增加。
3.使用moveTo/lineTo画线
moveTo(x,y)
将光标移动至指定坐标
该坐标作为绘制图形的起点坐标
其中参数x代表起点的横坐标
其中参数y代表起点的纵坐标
lineTo(x,y)
指定一个坐标作为绘制图形的终点坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function drawLine()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(10,10);
context.lineTo(10,100);
context.lineTo(125,125);
context.lineTo(150,175);
context.stroke();
}
</script>
<fieldset>
<legend>使用moveTo、lineTo绘制直线</legend>
<canvas id="myCanvas" width="200px" height="200px">
</canvas>
<br>
<button onclick="drawLine()">绘图</button>
</fieldset>
</body>
</html>
4.使用arc画弧线
arc(x,y,startangle,endangle,anticlockwise)
--x表示绘制弧形曲线圆心的横坐标
--y表示绘制弧形曲线圆心的纵坐标
--startangle表示绘制弧形曲线的起始弧度
--endangle表示绘制弧形曲线的结束弧度
--anticlockwise表示绘制弧形曲线的结束弧度
startangle和endangle都是以x轴为作为参照的，这两个参数用到的单位是弧度不是度。度和弧度直接转换的关系为：弧度=(Math.PI/180)*度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function drawArc()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(100,100,80,0,(Math.PI/180)*90,false);
context.stroke();
}
</script>
<!--
function drawLine()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(100,100,80,0,(Math.PI*2,true);
context.stroke();
}
-->
<fieldset>
<legend>绘制弧形</legend>
<canvas id="myCanvas" width="200px" height="200px">
</canvas>
<br>
<button onclick="drawArc()">绘图</button>
</fieldset>
</body>
</html>
5.绘制贝塞尔曲线
使用bezierCurveTo可以绘制三次贝塞尔曲线
使用quadraticCurveTo方法绘制二次贝塞尔曲线
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
--cp1x第一个控制点的横坐标
--cp1y第一个控制点的纵坐标
--cp2x第二个控制点的横坐标
--cp2y第二个控制点的纵坐标
--x贝塞尔曲线终点的横坐标
--y贝塞尔曲线终点的纵坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function draw()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
for (var i = 100; i < 105; i++) {
var x = Math.sin(i)*50;
var y = Math.cos(i)*100;
context.bezierCurveTo(i/100,i/100,x*x,y*y,x+y,x+y);
}
context.stroke();
}
</script>
<fieldset>
<legend>使用bezierCurveTo绘制弧形</legend>
<canvas id="myCanvas" width="500px" height="500px">
</canvas>
<br>
<button onclick="draw()">绘图</button>
</fieldset>
</body>
</html>
6.图形样式设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function draw()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "yellow";
context.strokeStyle= "red";
context.fillRect(60,60,130,110); //绘制矩形并在中间区域填充黄色
context.strokeRect(50,50,150,130); //绘制矩形并在边缘填充红色
context.clearRect(70,70,110,90); //清除指定区域像素
}
</script>
<fieldset>
<legend>绘制带样式的矩形</legend>
<canvas id="myCanvas" width="200px" height="200px">
</canvas>
<br>
<button onclick="draw()">绘图</button>
</fieldset>
</body>
</html>
1.fillStyl属性：
为当前画布上下文设置图形样式，默认是黑色
2.fillRect(x,y,width,height)方法：
绘制一个矩形，并使用当前的fillStyle样式
3.strokeRect(x,y,width,height)方法：
绘制一个矩形，使用当前的strokeStyle样式绘制矩形的边缘，中间区域不予处理
4.strokeStyle属性
7.线性渐变
creatLinearGradient(xstart,ystart,xend,yend)
--xstart渐变起始点的横坐标
--ystart渐变起始点的纵坐标
--xend渐变起始点的横坐标
--yend渐变终止点的纵坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function draw()
{
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//为矩形添加渐变效果
//调用reateLinearGradient方法时,
//将创建一个使用起点坐标及终点坐标的LinearGradient对象,
//为该对象设置渐变颜色及渐变度的方法应用格式
//addColorStop(offset,color)
//--offset表示颜色从离开渐变起始点开始变化的偏移量
//--color渐变使用的颜色
var mylinear=context.createLinearGradient(0,0, 150,50);// 创建一个线性渐变对象
mylinear.addColorStop(0,"red"); //设置第一阶段颜色
mylinear.addColorStop(0.8,"yellow"); //设置第二阶段颜色
mylinear.addColorStop(1,"green"); //设置第三阶段颜色
context.fillStyle=mylinear;
context.fillRect(0,0,250,150);//绘制矩形
//为文字添加渐变效果
var linearText=context.createLinearGradient(300,50,600,50);
linearText.addColorStop(0,"yellow");
linearText.addColorStop(0.5,"grey");
linearText.addColorStop(1,"red");
context.fillStyle=linearText;
context.font="30px Arial";
context.textBaseline="top";//文字对齐方式
context.fillText("HTML5线性渐变文字",300,50);//参数表示文字x,y轴的位置
}
</script>
<fieldset>
<legend>线性渐变</legend>
<canvas id="myCanvas" width="600px" height="200px">
</canvas>
<br>
<button onclick="draw()">绘图</button>
</fieldset>
</body>
</html>
8.径向渐变
creatRadialGradient(xstart,ystart,radiusStart,xEnd,yEnd,radiusEnd)
--xstart渐变开始圆的圆心横坐标
--ystart渐变开始圆的圆心纵坐标
--radiusStart渐变开始圆的半径
--xEnd渐变结束圆的圆心横坐标
--yEnd渐变结束圆的圆心纵坐标
--radiusEnd渐变结束圆的半径
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function draw()
{
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
fillColorRadial = context.createRadialGradient(150,150,10, 150,150,200);
fillColorRadial.addColorStop(0, "red"); // 设置第一阶段颜色
fillColorRadial.addColorStop(0.2, "yellow"); //设置第二阶段颜色
fillColorRadial.addColorStop(0.4, "black"); // 设置第三阶段颜色
context.fillStyle = fillColorRadial; // 填充样式
context.rect(0,0,300,300); // 绘制矩形
context.fill();
}
</script>
<fieldset>
<legend>线性渐变</legend>
<canvas id="myCanvas" width="300px" height="300px">
</canvas>
<br>
<button onclick="draw()">绘图</button>
</fieldset>
</body>
</html>
9.坐标平移
translate(x,y)
参数x为沿x轴方向唯一的像素数
参数y为沿着y轴方向位移的像素数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function draw()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillRect(0,0,100,50); //绘制第一个矩形
context.translate(50,80); //设置坐标平移
context.fillRect(0,0,100,50); //绘制第二个矩形
}
</script>
<fieldset>
<legend>使用translate设置坐标平移</legend>
<canvas id="myCanvas" width="200px" height="200px">
</canvas>
<br>
<button onclick="draw()">绘图</button>
</fieldset>
</body>
</html>
10.坐标放大
scale(x,y)
参数x为沿x轴方向放大倍数
参数y为沿着y轴方向放大倍数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function draw()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillRect(0,0,50,50); //绘制第一个矩形
context.scale(1.5,2.5); //设置坐标放大
context.fillRect(60,0,50,50); //绘制第二个矩形
context.scale(0.5,0.5); //设置坐标缩小
context.fillRect(280,0,50,50); //绘制第三个矩形
}
</script>
<fieldset>
<legend>使用scale设置坐标放大与缩小</legend>
<canvas id="myCanvas" width="300px" height="200px">
</canvas>
<br>
<button onclick="draw()">绘图</button>
</fieldset>
</body>
</html>
11.坐标旋转
rotate(angle)
坐标旋转指的是以原点为中心将图形旋转指定的角度
rotate方法用于设置坐标旋转
当angle为正值时没图形以顺时针方向旋转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function draw()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.translate(150,150);
for(var i=0; i<5; i++)
{
context.strokeRect(0,0,100,30); //绘制矩形
context.rotate(Math.PI/10); //设置旋转
}
}
</script>
<fieldset>
<legend>使用rotate设置坐标旋转</legend>
<canvas id="myCanvas" width="300px" height="300px">
</canvas>
<br>
<button onclick="draw()">绘图</button>
</fieldset>
</body>
</html>
11.图形组合处理
当我们的画布中有多个有重叠区域的图形时，
由于绘制顺序的不同，新绘制的图形将覆盖旧的图形
导致重叠部分将永远显示为新绘制图形
如果要自定义多个图形重叠部分的组合方式
以通过修改上下文对象的globalCompositeOperation属性来实现
属性值：source-over:
globalCompositeOperation默认属性值，新绘制图形将覆盖与原图形重叠部分
属性值：copy:
只显示新绘制图形，原图形与新图形重叠部分不显示，原图形中未与新图形重叠部分变成透明
属性值：darker:
重叠部分的两种突袭给都被显示，且新绘制图形与原图形的颜色值相减作为重叠部分的颜色值
属性值：xor:
原图形与绘制图形都显示，两图形重叠部分变为透明
...
12.图形阴影
属性值：shadowOffsetX:
阴影与图形的水平距离，默认值为0
当设置值大于0时阴影向右偏移
属性值：shadowOffsetY:
阴影与图形的垂直距离，默认值为0
当设置值大于0时阴影向上偏移
属性值：shadowColor
阴影颜色值
属性值：shadowBlur
阴影模糊度，默认值为1
设置值越大阴影模糊度越强
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function draw()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "red"; //设置填充颜色为红色
context.fillRect(50,50,100,100); //绘制矩形
context.shadowOffsetX =6; //设置阴影水平偏移量
context.shadowOffsetY =6; //设置阴影垂直偏移量
context.shadowColor ="gray"; //设置阴影颜色
context.shadowBlur=1; //设置阴影模糊度
}
</script>
<fieldset>
<legend>使用图像阴影</legend>
<canvas id="myCanvas" width="200px" height="200px">
</canvas>
<br>
<button onclick="draw()">绘图</button>
</fieldset>
</body>
</html>
13.绘制图像
使用drawImage()方法，可以将页面已经存在的<img>元素、<video>元素
或者通过js创建的image对象绘制再画布中
drawImage(image,dx,dy)直接绘制图像
drawImage(image,dx,dy,dw,dh)可绘制缩放图形
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)可绘制切割图形
--image:画布引用的图片对象
--dx:图片对象左上角在画布中的横坐标
--dy:图片对象左上角在画布中的纵坐标
--dw:图片对象缩放至画布中的宽度
--dh:图片对象缩放至画布中的高度
--sx:图片对象被绘制部分的横坐标
--sy:图片对象被绘制部分的纵坐标
--sw:图片对象被绘制部分的宽度
--sh:图片对象被绘制部分的高度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function draw(i)
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src= "li.png";
image.onload = function()
{
if(i==1)
context.drawImage(image,0,0);
else if(i==2)
context.drawImage(image,500,0,200,300);
else
context.drawImage(image,30,30,440,400,700,0,160,180);
}
}
</script>
<fieldset>
<legend>使用drawImage方法绘制图像</legend>
<canvas id="myCanvas" width="850px" height="600px">
</canvas>
<br>
<button onclick="draw(1)">原图</button>
<button onclick="draw(2)">缩放图</button>
<button onclick="draw(3)">切割图</button>
</fieldset>
</body>
</html>
14.图像平铺
createPattern(image,type)
其中参数image为被平铺的图像对象，type表示图像平铺方式
type取值有四种
--no-repeat
--repeat-x
--repeat-y
--repeat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function draw(i)
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src= "li.png";
image.onload = function()
{
if(i==1)
context.fillStyle=context.createPattern(image,"repeat-x"); //设置横向平铺
else if(i==2)
context.fillStyle=context.createPattern(image,"repeat-y"); //设置纵向平铺
else
context.fillStyle=context.createPattern(image,"repeat"); //设置全向平铺
context.fillRect(0,0,canvas.width,canvas.height); //填充画布
}
}
</script>
<fieldset>
<legend>图像平铺</legend>
<canvas id="myCanvas" width="800px" height="500px">
</canvas>
<br>
<button onclick="draw(1)">横向平铺</button>
<button onclick="draw(2)">纵向平铺</button>
<button onclick="draw(3)">全向平铺</button>
</fieldset>
</body>
</html>
15.图像剪裁
clip方法用于实现图片剪裁
调用前需要使用路径方式在画布中绘制剪裁区域，
然后才能调用clip方法对指定区域进行剪裁
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script type="text/JavaScript">
function draw()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src="li.png";
image.onload = function()
{
//绘制一个心形边框用于剪裁对象
context.translate(250,120);
var r=0 , a=100 , start = 0 , end= 0;
context.rotate(Math.PI);
for(var q=0; q<500; q++){
start += Math.PI * 2 /500;
end = start + Math.PI * 2 /500;
r=a * (1-Math.sin(start))+60; //心形极坐标表示法
context.arc(0,0,r,start,end,false);
}
context.stroke();
context.clip(); //调用clip方法进行剪裁
context.drawImage(image,0,0); //绘图
}
}
</script>
<fieldset>
<legend>图片剪裁</legend>
<canvas id="myCanvas" width="600px" height="400px">
</canvas>
<br>
<button onclick="draw()">图像剪裁</button>
</fieldset>
</body>
</html>
16.像素处理
1.getImageData
用于获取指定区域内的像素
2.putImageData
用于将处理后的像素重新绘制在指定区域内
17.绘制文字
fillText(content,dx,dy[,maxlength])
用于在画布中以填充的方式绘制文字
content:文字内容信息
dx:绘制文字开始点的横坐标
dy:绘制文字开始点的纵坐标
maxLength:可选参数，表示绘制文字的最大长度
strokeText(content,dx,dy[,maxlength])
用于在画布中以描边的方式绘制文字
绘制文字相关属性说明
font设置字体、大小、行距等样式
text-align文本对齐方式
textBaseline设置文本相对于起点坐标的位置，可取值top、bottom、middle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<script>
function draw()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
drawText(context,"bold 40px impact",20,50,"stroke");
drawText(context,"bold 40px sans ms",50,100,"fill");
}
function drawText(context,font,x,y,fillType)
{
context.font = font;
context.textAlign = "left";
context.textBaseline = "top";
if (fillType == "fill")
{
context.fillText("HTML5 绘制文字",x,y)
}
else
{
context.strokeText("HTML5 绘制文字",x,y);
}
}
</script>
<fieldset>
<legend>绘制文字</legend>
<canvas id="myCanvas" width="400px" height="200px">
</canvas>
<br>
<button onclick="draw()">绘图</button>
</fieldset>
</body>
</html>
18.保存、恢复图形
save和restore方法不需要任何参数，直接使用画布上下文对象进行调用即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
var i=0;
function draw()
{
i++;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.clearRect(0,0,400,200); //清空指定区域
if (i==1) //绘制一个红色填充矩形区域
{
context.fillStyle="red";
context.fillRect(10,10,100,50);
}
else if (i==2) //绘制一个黄色填充矩形区域
{
context.fillStyle="yellow";
context.fillRect(30,40,100,50);
}
else
{
context.fillRect(50,70,100,50);
}
}
function save() //保存图形
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.save();
}
function restore() //还原图形
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.restore();
}
</script>
<fieldset>
<legend>绘制文字</legend>
<canvas id="myCanvas" width="400px" height="200px">
</canvas>
<br>
<button onclick="draw()">绘图</button>
<button onclick="save()">保存</button>
<button onclick="restore()">还原</button>
</fieldset>
</body>
</html>
19.制作动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
var x=0,y=0;
//绘制矩形，其中矩形的起始点坐标为动态增加
function move()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.clearRect(0,0,400,200);
if (x<400)
{
x++;
}
if (y<200)
{
y++;
}
context.fillRect(x,y,50,50);
}
function draw()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(0,0,50,50);
setInterval(move,200); //每200毫秒调用move方法一次
}
</script>
<fieldset>
<legend>简单动画效果</legend>
<canvas id="myCanvas" width="400px" height="200px">
</canvas>
<br>
<button onclick="draw()">绘图</button>
</fieldset>
</body>
</html>
20.案例：绘制时钟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script type="text/JavaScript">
var slen = 70; //定义秒针长度
var mlen = 65; //定义分针长度
var hlen = 45; //定义时针长度
var ls = 0;
var lm = 0;
var lh = 0;
function draw()
{
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.beginPath();
cxt.arc(200, 150, 4, 0, 2 * Math.PI, true); //绘制表盘中心
cxt.fill();
cxt.closePath();
cxt.beginPath();
cxt.arc(200, 150, 100, 0, 2 * Math.PI, true); //绘制表盘外围
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.translate(200, 150); //平移原点
cxt.rotate(-Math.PI / 2);
cxt.save();
for (var i = 0; i < 60; i++) //绘制矩形刻度线
{
if (i % 5 == 0)
{
cxt.fillRect(80, 0, 20, 5);
}
else
{
cxt.fillRect(90, 0, 10, 2);
}
cxt.rotate(Math.PI / 30); //每绘制一个刻度线旋转一次
}
cxt.closePath();
setInterval("Refresh();", 1000); //每1秒钟调用refresh方法刷新时针，分针，秒针位置
}
function Refresh()
{
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.restore();
cxt.save();
cxt.rotate(ls * Math.PI / 30);
cxt.clearRect(5, -1, slen+1, 4); //清除秒针上次显示内容
cxt.restore();
cxt.save();
cxt.rotate(lm * Math.PI / 30);
cxt.clearRect(5, -1, mlen+1, 5); //清除分针上次显示内容
cxt.restore();
cxt.save();
cxt.rotate(lh * Math.PI / 6);
cxt.clearRect(5, -3, hlen+1, 6); //清除时针上次显示内容
var time = new Date();
var s = ls=time.getSeconds(); //获取当前时间(秒钟)
var m = lm=time.getMinutes(); //获取当前时间(分钟)
var h = lh=time.getHours(); //获取当前时间(小时)
cxt.restore();
cxt.save();
cxt.rotate(s * Math.PI / 30); //根据当前秒钟数设置分针位置
cxt.fillRect(5, 0, slen, 2); //重新绘制秒针
cxt.restore();
cxt.save();
cxt.rotate(m * Math.PI / 30); //根据当前分钟数设置分针位置
cxt.fillRect(5, 0, mlen, 3); //重新绘制分针
cxt.restore();
cxt.save();
cxt.rotate(h * Math.PI / 6); //根据当前小时钟数设置分针位置
cxt.fillRect(5, -2, hlen, 4); //重新绘制时针
}
</script>
<body>
<fieldset>
<legend>绘制时钟</legend>
<canvas id="myCanvas" width="400" height="300"></canvas>
<br>
<button onClick="draw()">绘图</button>
</fieldset>
</body>
</html>
