学习了很多的绘图代码之后，我们在绘制单一图形方面就往往非常简单了，但是一些组合图形与复杂图形的绘制还是有一定难度的，这种难度体现在坐标的精确定位上面。
工具/原料
dreamweaver
方法/步骤
1
思路。要绘制如图所示的这样的两个切线弧度是需要两种绘制代码来操作的。一种是直线ctx.lineTo（），还有一种是弧度ctx.arcTo（）这两个代码结合起来使用才会成功。另外，各个坐标点的精确定位也是关键所在。其它的就是外框与曲线的样式了。
3
确定第一个弧度的代码。ctx.moveTo(20,20); // 起点ctx.lineTo(100,20); // 直线ctx.arcTo(150,20,150,70,50); //弧ctx.lineTo(150,120); // 竖线
4
确定第二个弧度的代码。ctx.arcTo(150,170,200,170,50)ctx.lineTo(250,170); ctx.stroke();
5
把所有的代码组合一下，从而让最终的网页效果呈现出来。
6
深入学习java弧度绘制的用法。用java弧度绘制更加的简单，我们只要给出一个起点与一个终点，再加上一个弧度的半径就可以让图形呈现出来了！context.fillRect(x1,y1,x2,y2,r); 与ctx.arcTo(）有着相似的结果。
下一篇：HTML5 精灵移动