<html>
<head>
</head>
<body>
<canvas id="myRect" width="200" height="100">Your browser does not support the canvas element.</canvas>
<canvas id="myLine" width="200" height="100">Your browser does not support the canvas element.</canvas>
<canvas id="myArc" height="300" width="200">Your browser does not support the canvas element.</canvas>
<canvas id="myColor" height="200" width="100">Your browser does not support the canvas element.</canvas>
<canvas id="myImage" height="300" width="300">Your browser does not support the canvas element.</canvas>
</body>
<script type="text/javascript">
/////矩形////////////////////////////////
var c=document.getElementById("myRect");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
////X,Y,WIDTH,HEIGHT
cxt.fillRect(0,0,150,75);
/////////end////////////////////////////
////////线段///////////////////////////
var c=document.getElementById("myLine");
var cxt=c.getContext("2d");
////X,Y
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.lineTo(10,10);
cxt.stroke();
/////end///////////////////////////////
////圆形///////////////////////////////
var c=document.getElementById("myArc");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
////圆心横坐标、纵坐标、半径
cxt.arc(100,100,100,200,Math.PI*2,true);
cxt.closePath();
cxt.fill();
/////end///////////////////////////////
////渐变////////////////////////////////
var c=document.getElementById("myColor");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
/////开始颜色(只能横向渐变)
grd.addColorStop(0,"#FF0000");
/////末端颜色
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
/////x,y,width,height
cxt.fillRect(10,10,200,100);
////end//////////////////////////////////
/////图片/////////////////////////////
var c=document.getElementById("myImage");
var cxt=c.getContext("2d");
var img=new Image();
////图片路径
img.src="canvas.png";
////绘制图片、定义图片的横、纵坐标
cxt.drawImage(img,20,10);
/////end//////////////////////////////
</script>
</html>