画圆角 - HTML5 Canvas 作图

冷不防 2021-12-05 16:10 398阅读 0赞

2、function DrawAOBArc(Canvas,A,O,B,Radius)  
功能：[画圆角][Link 1]  
参数：Radius：[圆角][Link 1]的大小；A，B：边上两点；

源代码：

function [DrawAOBArc][Link 1](Canvas,A,O,B,Radius)  
\{  
//[画圆角][Link 1]  
/\* example:  
var A=new Array(50,50);  
var O=new Array(50,150);  
var B=new Array(100,150);  
  
hb.translate(30, 0);  
hb.beginPath();  
hb.strokestyle="\#000000";  
DrawAOBArc(hb,A,O,B,20);  
hb.stroke();  
\*/  
with (Canvas)  
\{  
moveTo(A\[0\],A\[1\]);  
arcTo(O\[0\],O\[1\],B\[0\],B\[1\],Radius);  
lineTo(B\[0\],B\[1\]);  
\}  
\}

实例：  
<html>  
<script type="[text/javascript][text_javascript]" src="bigengineer.js"></script>  
<body><canvas id="cc" width="2000" height="2000"></canvas>  
<script type="text/javascript">  
var c=[document.getElementById][text_javascript]("cc");  
var hb=c.getContext("2d");  
  
var A=new Array(5,5);  
var O=new Array(130,130);  
var B=new Array(5,150);  
  
hb.beginPath();  
hb.[strokestyle][text_javascript]="\#000000";  
  
DrawAOBArc(hb,A,O,B,10);  
hb.stroke();  
  
hb.endPath();  
</script>  
</body>  
</html>  
用[Google浏览器][Google]浏览的效果如下：

![2012081309164291.png][]

本文节选自我[金海龙][Link 2]2010年写的《 [HTML5 Canvas 作图函数库2.0版本.pdf][HTML5 Canvas _2.0_.pdf] 》,  
  
在[HTML5][]刚登陆中国大陆的时候，奇缺权威资料，我及时写作，刚一发布，就引起了关注，也成为被盗版的目标，当你们在**Google搜索：**[HTML5 作图][HTML5 1] 就可以看到我[金海龙][HTML5]作品的排名。  
  
这正说明了[我的编程实力][Link 3]。  
  
再接再厉，做完一个版本、开发完一次，才能觉得不完美。  
  
我最近正在写作《[HTML 5 Canvas应用开发者指南][HTML 5 Canvas]》，写完一章节，就发布在我[金海龙][Link 4]的[个人主页上][Link 3]，  
  
在我[个人博客][Link 3]上只发表其中一些部分段落，写写感想，或者其它的，只要我有时间的话。

转载于:https://www.cnblogs.com/htmlcanvas/archive/2012/08/13/2635748.html

[Link 1]: http://www.google.com.hk/custom?q=%D4%B2%BD%C7+%BD%F0%BA%A3%C1%FA&sa=%CB%D1%CB%F7&client=pub-1884336373317843&forid=1&ie=GB2312&oe=GB2312&safe=active&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23FFFFFF%3BVLC%3AC3D9FF%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3AFFFFFF%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BLH%3A50%3BLW%3A30%3BL%3Ahttp%3A%2F%2Fimg459.ph.126.net%2FZ7O4XzyPJ7RGxYsoFkVmnA%3D%3D%2F21392098232485138.jpg%3BS%3Ahttp%3A%2F%2Fbigengineer.blog.163.com%3BFORID%3A1&hl=zh-CN
[text_javascript]: http://www.google.com.hk/cse?cx=partner-pub-1884336373317843:9738977093&ie=UTF-8&q=javascript&ref=#gsc.tab=0&gsc.q=javascript&gsc.page=1
[Google]: http://www.google.com.hk/cse?cx=partner-pub-1884336373317843:9738977093&ie=UTF-8&q=Google%3F%3F%3F%3F%3F%3F&ref=#gsc.tab=0&gsc.q=Google%3F%3F%3F%3F%3F%3F&gsc.page=1
[2012081309164291.png]: /images/20211205/40dde104a0c34d889032e39be68bccd9.png
[Link 2]: http://www.google.com.hk/custom?q=VB+%BD%F0%BA%A3%C1%FA&sa=%CB%D1%CB%F7&client=pub-1884336373317843&forid=1&ie=GB2312&oe=GB2312&safe=active&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23FFFFFF%3BVLC%3AC3D9FF%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3AFFFFFF%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BLH%3A50%3BLW%3A30%3BL%3Ahttp%3A%2F%2Fimg459.ph.126.net%2FZ7O4XzyPJ7RGxYsoFkVmnA%3D%3D%2F21392098232485138.jpg%3BS%3Ahttp%3A%2F%2Fbigengineer.blog.163.com%3BFORID%3A1&hl=zh-CN
[HTML5 Canvas _2.0_.pdf]: http://www.google.com.hk/custom?q=HTML5+Canvas+%D7%F7%CD%BC%BA%AF%CA%FD%BF%E22.0%B0%E6%B1%BE.pdf&sa=%CB%D1%CB%F7&client=pub-1884336373317843&forid=1&ie=GB2312&oe=GB2312&safe=active&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23FFFFFF%3BVLC%3AC3D9FF%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3AFFFFFF%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BLH%3A50%3BLW%3A30%3BL%3Ahttp%3A%2F%2Fimg459.ph.126.net%2FZ7O4XzyPJ7RGxYsoFkVmnA%3D%3D%2F21392098232485138.jpg%3BS%3Ahttp%3A%2F%2Fbigengineer.blog.163.com%3BFORID%3A1&hl=zh-CN
[HTML5]: http://www.google.com.hk/custom?q=HTML5+%BD%F0%BA%A3%C1%FA&sa=%CB%D1%CB%F7&client=pub-1884336373317843&forid=1&ie=GB2312&oe=GB2312&safe=active&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23FFFFFF%3BVLC%3AC3D9FF%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3AFFFFFF%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BLH%3A50%3BLW%3A30%3BL%3Ahttp%3A%2F%2Fimg459.ph.126.net%2FZ7O4XzyPJ7RGxYsoFkVmnA%3D%3D%2F21392098232485138.jpg%3BS%3Ahttp%3A%2F%2Fbigengineer.blog.163.com%3BFORID%3A1&hl=zh-CN
[HTML5 1]: http://www.google.com.hk/custom?q=HTML5+%D7%F7%CD%BC&sa=%CB%D1%CB%F7&client=pub-1884336373317843&forid=1&ie=GB2312&oe=GB2312&safe=active&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23FFFFFF%3BVLC%3AC3D9FF%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3AFFFFFF%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BLH%3A50%3BLW%3A30%3BL%3Ahttp%3A%2F%2Fimg459.ph.126.net%2FZ7O4XzyPJ7RGxYsoFkVmnA%3D%3D%2F21392098232485138.jpg%3BS%3Ahttp%3A%2F%2Fbigengineer.blog.163.com%3BFORID%3A1&hl=zh-CN
[Link 3]: http://www.google.com.hk/cse?cx=partner-pub-1884336373317843:9738977093&ie=UTF-8&q=free+hosting&ref=#gsc.tab=0&gsc.q=free%20hosting&gsc.page=1
[HTML 5 Canvas]: http://www.google.com.hk/custom?q=HTML+5+Canvas%D3%A6%D3%C3%BF%AA%B7%A2%D5%DF%D6%B8%C4%CF&sa=%CB%D1%CB%F7&client=pub-1884336373317843&forid=1&ie=GB2312&oe=GB2312&safe=active&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23FFFFFF%3BVLC%3AC3D9FF%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3AFFFFFF%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BLH%3A50%3BLW%3A30%3BL%3Ahttp%3A%2F%2Fimg459.ph.126.net%2FZ7O4XzyPJ7RGxYsoFkVmnA%3D%3D%2F21392098232485138.jpg%3BS%3Ahttp%3A%2F%2Fbigengineer.blog.163.com%3BFORID%3A1&hl=zh-CN
[Link 4]: http://www.google.com.hk/custom?q=HTML+5+Canvas+%BD%F0%BA%A3%C1%FA&sa=%CB%D1%CB%F7&client=pub-1884336373317843&forid=1&ie=GB2312&oe=GB2312&safe=active&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23FFFFFF%3BVLC%3AC3D9FF%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3AFFFFFF%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BLH%3A50%3BLW%3A30%3BL%3Ahttp%3A%2F%2Fimg459.ph.126.net%2FZ7O4XzyPJ7RGxYsoFkVmnA%3D%3D%2F21392098232485138.jpg%3BS%3Ahttp%3A%2F%2Fbigengineer.blog.163.com%3BFORID%3A1&hl=zh-CN