<!DOCTYPEHTML><html><body><canvasid="myCanvas"width="800"height="600"></canvas><scripttype="text/javascript">//getcanvasinstancevarcanvas=document.getElementById("myCanvas");varctx=canvas.getContext("2d");//drawalinectx.moveTo(10,10);ctx.lineTo(150,50);ctx.lineTo(10,50);ctx.stroke();//drawacirclectx.beginPath();ctx.arc(100,100,30,0,Math.PI*2,true);ctx.closePath();ctx.stroke();//fillacirclectx.fillStyle="#FF0000";ctx.beginPath();ctx.arc(100,200,30,0,Math.PI*2,true);ctx.closePath();ctx.fill();//createlineargradientvarlinearGrd=ctx.createLinearGradient(0,0,270,0);linearGrd.addColorStop(0,"black");linearGrd.addColorStop(0.5,"red");linearGrd.addColorStop(1,"white");ctx.fillStyle=linearGrd;ctx.fillRect(120,230,140,40);//createradialgradientvarradialGrd=ctx.createRadialGradient(400,400,50,400,400,100);radialGrd.addColorStop(0,"red");radialGrd.addColorStop(1,"white");ctx.fillStyle=radialGrd;ctx.fillRect(300,300,500,500);//drawp_w_picpathvarimg=newImage();img.src="e.jpg";img.onload=function(){ctx.drawImage(img,0,0,50,50,0,400,50,50);};</script></body></html>