html5学习笔记1

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(0,50);
cxt.lineTo(70,80);
cxt.lineTo(10,10);
cxt.stroke();

</script>

</body>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#aabb00";
cxt.beginPath();
cxt.arc(100,50,30,0,Math.PI*1.5,false);//(圆心横坐标，圆心纵坐标，半径，圆弧起始点，圆弧终止点，逆时针或顺时针划弧)；true逆时针，false顺时针
cxt.closePath();
cxt.fill();

</script>

</body>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);//渐变的起始点和终止点坐标
grd.addColorStop(0,"#FF0000");//将起始位置到终止位置看作1，填充
grd.addColorStop(0.5,"#00FF00");//将起始位置到终止位置看作1，填充，本例填充0～0.5的范围
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);矩形的大小（本例灰色外边框）

</script>

</body>