2、图形绘制 2.2线条 案例3:<body <canvas id=demo"width=300" height="200 style"border: 1px solid #cccccc: >/canvas> <script type="text/javascript"> /获取 canvas元素对应的DQM对象 var canvas document getElementById(demo") /获取在 canvas上绘图的 canvasRenderingContext.2对象 var ctx canvas getContext(2d) /设置填充颜色 ctx strokeStyle='#0o7ACC' ctx. beginPath0;/开始定义路径 ctx. moveTo(10,10);/把 Canvas的当前点移动到位置(x,y) ctx.1 ineT(290,190);/把 Canvas的当前路径从当前位置连接到(x、y)的对应点 ctx. closePathO;//关闭路径 //绘制线条路径 ctx stroke </script> </body>
2、图形绘制 2.2线条 案例3：<body> <canvas id="demo" width="300" height="200" style="border:1px solid #CCCCCC;"></canvas> <script type="text/javascript"> //获取canvas元素对应的DOM对象 var canvas = document.getElementById("demo"); //获取在canvas上绘图的canvasRenderingContext2D对象 var ctx = canvas.getContext("2d"); //设置填充颜色 ctx.strokeStyle = '#007ACC'; ctx.beginPath(); //开始定义路径 ctx.moveTo(10, 10); //把Canvas的当前点移动到位置（x，y） ctx.lineTo(290, 190);//把Canvas的当前路径从当前位置连接到（x、y）的对应点 ctx.closePath(); //关闭路径 //绘制线条路径 ctx.stroke(); </script> </body>
2、图形绘制 2.3多边形 多边形 ■ CanvasRenderingContext2只提供了绘制矩形的方法,要使用路径才能绘制复杂的 几何图形。 ■正多边形中心点为(dx,dy),外圆半径为size,边数为n,相邻两定点与中心点形 成的角的弧度为2*Math.PI/no
2、图形绘制 2.3多边形 多边形 CanvasRenderingContext2D只提供了绘制矩形的方法，要使用路径才能绘制复杂的 几何图形。 正多边形中心点为（dx，dy），外圆半径为size，边数为n，相邻两定点与中心点形 成的角的弧度为2 * Math.PI / n
2、图形绘制 2.4圆角矩形 园角矩形 ■通过 CanvasRenderingContext2D绘制矩形的方法,设置 line Join=" round"可以向 画布添加圆角矩形,但矩形的圆角不可控制。 CanvasRenderingContext2D使用 arcTo(方法绘制可控的圆角矩形。 arcTo(float xl, float y1, float x2, float y2, float radius): Canvas BJ3 前路径上添加一段圆弧。 arcTo o方法确定一段圆弧的方式是:假设从当前点到P1(x1,y1)绘制一条线段,再 从P1(x1,y1)到P2(x2,y2)绘制一条线段, arcto0则绘制一端同时与上面两条线段相 切,且半径为 radius的圆弧
2、图形绘制 2.4圆角矩形 圆角矩形 通过CanvasRenderingContext2D绘制矩形的方法，设置lineJoin = "round"可以向 画布添加圆角矩形，但矩形的圆角不可控制。 CanvasRenderingContext2D使用arcTo()方法绘制可控的圆角矩形。 arcTo(float x1, float y1, float x2, float y2, float radius)：向Canvas的当 前路径上添加一段圆弧。 arcTo()方法确定一段圆弧的方式是：假设从当前点到P1(x1,y1)绘制一条线段，再 从P1(x1,y1)到P2(x2,y2)绘制一条线段，arcTo()则绘制一端同时与上面两条线段相 切，且半径为radius的圆弧