<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制直线</title>
</head>
<body>
<canvas id="cloth" width="200" heigth="200" style="border:1px solid #ff0000;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("cloth");
var ece = c.getContext("2d");
//直线
// ece.moveTo(10,10);
// ece.lineTo(150,50);
// ece.lineTo(10,50);
// ece.lineTo(10,10);
// ece.fillStyle="#ff0000";
// ece.fill();
// ece.lineWidth=5;
// ece.strokeStyle="#00ff00";
// ece.stroke();
//圆形
// ece.beginPath();
// ece.arc(50,50,50,0,2*Math.PI);
// ece.fillStyle="#00ff00";
// ece.closePath();
// ece.fill();
//渐变色
var grd=ece.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#0000FF");
ece.fillStyle=grd;
ece.fillRect(0,0,175,50);
</script>
</body>
</html>