标签：idt 开始 net images amp 支持 charset pat 技术
1.Canvas绘制一个蓝色的矩形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script type="text/javascript"> var canvas=document.getElementById(‘myCanvas‘); var ctx=canvas.getContext(‘2d‘); ctx.fillStyle=‘#000099‘; ctx.fillRect(0,0,80,100); </script> </body> </html>
显示
2.绘制基本的直线
①绘制直线
<body> <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById("myCanvas"); //获取Canvas对象 var ctx=canvas.getContext("2d"); //获取上下文对象 ctx.beginPath(); //开始一个新的绘制路径 ctx.moveTo(10,10); //定义直线的起点坐标 ctx.lineTo(200,10); //定义直线的终点坐标 ctx.stroke(); //沿着坐标点顺序的路径绘制直线 ctx.closePath(); //关闭当前的绘制路径 </script> </body>
显示：
② 绘制二次曲线：
是直线锥面的两腔被一平面所截而得的曲线。二次曲线由一个起点、一个终点和一个控制点决定，当控制点经过圆锥顶点时，曲线变成一个点、直线或者相交直线，当控制点不经过圆锥顶点时，曲线可能是圆、锥圆、双曲线或抛物线。
<body> <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> <script type="text/javascript"> var canvas=document.getElementById(‘myCanvas‘); if(canvas && canvas.getContext){ //判断Canvas对象是否为空 var ctx = canvas.getContext("2d"); //获取Canvas对象上下文 ctx.beginPath(); //开始一个新的绘制路径 ctx.moveTo(100,50); //定义直线的起点坐标为(100,50) ctx.quadraticCurveTo(100,15,300,30); //设置二次曲线坐标 ctx.stroke(); //绘制路径 } </script> </body>
判断Canvas对象是否为空：是因为有些浏览器对Canvas的支持不是很好，为了避免网页运行时出现错误，需要提前判断。
显示：
③绘制贝赛尔曲线
每一个顶点都有两个控制点，用于控制在该顶点
标签：idt 开始 net images amp 支持 charset pat 技术
原文地址：http://www.cnblogs.com/sunli0205/p/6240953.html
