html5学习笔记1

来源：互联网发布：医保的软件编辑：程序博客网时间：2024/06/08 00:06

<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>

0 0