HTML5的Canvas元素是一个强大的绘图元素，利用他可以绘制出你想要的形状，下面是几个简单的Canvas应用代码。function?DrawSj（）？{

 

　　var?myCanvas1?=?document.getElementById（"myCanvas"）;

 

　　var?affiche?=?document.getElementById（"affiche"）;

 

　　var?draw?=?myCanvas1.getContext（"2d"）;

 

　　if?（state?==?1）？{

 

　　state?=?0;

 

　　player.play（）;

 

　　affiche.start（）;

 

　　myCanvas1.title?=?"鍋滄鎾斁";

 

　　draw.clearRect（0,?0,?200,?200）;

 

　　draw.beginPath（）;

 

　　draw.fillStyle?=?"#fff";

 

　　draw.fillRect（0,?0,?5,?40）;

 

　　draw.fill（）;

 

　　draw.beginPath（）;

 

　　draw.fillStyle?=?"#fff";

 

　　draw.fillRect（8,?0,?5,?40）;

 

　　draw.fill（）;

 

　　}?else?{

 

　　state?=?1;

 

　　player.pause（）;

 

　　affiche.stop（）;

 

　　myCanvas1.title?=?"缁х画鎾斁";

 

　　draw.clearRect（0,?0,?200,?200）;

 

　　draw.beginPath（）;

 

　　draw.fillStyle?=?"#fff";

 

　　draw.moveTo（0,?0）;

 

　　draw.lineTo（0,?20）;

 

　　draw.lineTo（10,?10）;

 

　　draw.fill（）;

 

　　}

 

　　}

 

　　function?DrawnewCanvas（）？{

 

　　var?mynewCanvas?=?document.getElementsByClassName（"newCanvas"）;

 

　　for?（var?i?=?0;?i?

 

　　var?draw?=?mynewCanvas[i].getContext（"2d"）;

 

　　draw.beginPath（）;

 

　　draw.fillStyle?=?"#fff";

 

　　draw.moveTo（-1,?10）;

 

　　draw.lineTo（10,?21）;

 

　　draw.lineTo（10,?-1）;

 

　　draw.fill（）;

 

　　draw.beginPath（）;

 

　　draw.fillStyle?=?"#2974ba";

 

　　draw.moveTo（0,?10）;

 

　　draw.lineTo（10,?20）;

 

　　draw.lineTo（10,?0）;

 

　　draw.fill（）;

 

　　}

 

　　}

 

　　function?DrawPlCanvas（）？{

 

　　var?myplCanvas?=?document.getElementsByClassName（"plCanvas"）;

 

　　for?（var?i?=?0;?i?

 

　　var?draw?=?myplCanvas[i].getContext（"2d"）;

 

　　draw.beginPath（）;

 

　　draw.fillStyle?=?"#fff";

 

　　draw.moveTo（10,?-1）;

 

　　draw.lineTo（-1,?10）;

 

　　draw.lineTo（21,?10）;

 

　　draw.fill（）;

 

　　draw.beginPath（）;

 

　　draw.fillStyle?=?"#224b73";

 

　　draw.moveTo（10,?0）;

 

　　draw.lineTo（0,?10）;

 

　　draw.lineTo（20,?10）;

 

　　draw.fill（）;

 

　　}

 

　　}