pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

Canvas畫橢圓的方法

由AlloyTeam團隊的 TAT.vorshen分享給大家實實在在的干貨,很受用!希望大家認真閱讀真正掌握有用的技術,有想法也可在下面評論出來,以便交流。,HTML5中國,中國最大的HTML5中文門戶。
  雖然標題是畫橢圓,但是我們先來說說Canvas中的圓

  相信大家對于Canvas畫圓都不陌生
  1. oGC.arc(400, 300, 100, 0, 2*Math.PI, false);
復制代碼

  如上所示,直接調用API就可以了,但是計算機內部卻是使用光柵學,利用bresenham算法畫圓的,這個我們放到最后來說,先說說利用圓的參數方程畫圓
  1. circle(oGC, 400, 300, 100);
  2. function circle(context, x, y, a) { // x,y是坐標;a是半徑
  3.     var r = 1/a; // ①注意:此處r可以寫死,不過不同情況下寫死的值不同
  4.     context.beginPath();
  5.     context.moveTo(x + a, y);
  6.     for(var i = 0; i < 2 * Math.PI; i += r) {
  7.         context.lineTo(x + a * Math.cos(i), y + a * Math.sin(i));
  8.     }
  9.     context.closePath();
  10.     context.fill();
  11. }
復制代碼

  原理是什么,相信三角函數不錯的童鞋理解起來很容易的,如果不知道的話,注意注釋①,我變化一下r的值,相信就立竿見影了~

1.jpg

2.jpg

3.jpg

4.jpg

  r和2*Math.PI配合就是圓的精細程度,在半徑為100的時候,r取1/10就可以了,通用的話可以寫死,寫成r = 1 / a;這樣無論半徑取大或者小,圓都會很精細,但是性能會有很大影響

  現在來看看文章的主角,針對圓來看橢圓的
  1. function EllipseOne(context, x, y, a, b) {
  2.     var step = (a > b) ? 1 / a : 1 / b;
  3.     context.beginPath();
  4.     context.moveTo(x + a, y);
  5.     for(var i = 0; i < 2 * Math.PI; i += step) {
  6.         context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
  7.     }
  8.     context.closePath();
  9.     context.fill();
  10. }
復制代碼

  和圓基本一樣,不過圓只有一個半徑,而橢圓分為長軸和短軸了。

  看下效果~

5.jpg

  好了,畫橢圓成功,文章結束~

  怎么可能!

  就這樣結束也太沒品了,剛剛是方法一,下面來看其他的

  方法二,均勻壓縮法

  這是我最喜歡的方法,易理解,相比較方法一,性能也快了很多,先貼代碼~
  1. function EllipseTwo(context, x, y, a, b) {
  2.     context.save();
  3.     var r = (a > b) ? a : b;
  4.     var ratioX = a / r;
  5.     var ratioY = b / r;
  6.     context.scale(ratioX, ratioY);
  7.     context.beginPath();
  8.     context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
  9.     context.closePath();
  10.     context.restore();
  11.     context.fill();
  12. }
復制代碼

  原理是利用了scale來對一個標準的圓進行壓縮,ratioX是橫軸縮放比率,ratioY是縱軸縮放比率,就因為這兩個值不同,使得將標準圓縮放成了一個橢圓

  記得save()和restore()還原context環境,so easy理解的方法

  下面兩種方法很高大上,都是利用三次貝塞爾曲線法

  方法三,四,貝塞爾法
  1. function EllipseThree(context, x, y, a, b) {
  2.     var ox = 0.5 * a,
  3.         oy = 0.6 * b;

  4.     context.save();
  5.     context.translate(x, y);
  6.     context.beginPath();
  7.     context.moveTo(0, b);
  8.     context.bezierCurveTo(ox, b, a, oy, a, 0);
  9.     context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
  10.     context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
  11.     context.bezierCurveTo(-a, oy, -ox, b, 0, b);
  12.     context.closePath();
  13.     context.fill();
  14.     context.restore();
  15. }

  16. function EllipseFour(context, x, y, a, b) {
  17.     var k = 0.5522848,
  18.     ox = k * a,
  19.     oy = k * b;

  20.     context.translate(x, y);
  21.     context.beginPath();
  22.     context.moveTo(-a, 0);
  23.     context.bezierCurveTo(-a, oy, -ox, -b, 0, -b);
  24.     context.bezierCurveTo(ox, -b, a, -oy, a, 0);
  25.     context.bezierCurveTo(a, oy, ox, b, 0, b);
  26.     context.bezierCurveTo(-ox, b, -a, oy, -a, 0);
  27.     context.closePath();
  28.     context.fill();
  29. }
復制代碼

  貝塞爾法的核心在于兩個控制點的選取,但是它有致命的問題,當lineWidth較寬的時候,橢圓較扁,長軸較尖銳,會出現不平滑的情況

  如果不知道什么事貝塞爾的話就自行百度……這個不解釋了……

  后面還有最后一種光柵法畫橢圓,光柵法畫圓很簡單,畫橢圓挺麻煩的,下面是最簡單的一種橢圓畫法,等于是lineWidth為1px的情況下
  1. function EllipseFive(context, x, y, a, b) {
  2.     var data = context.getImageData(0, 0, 800, 600);
  3.     var imageData = data.data;
  4.     var tx = 0;
  5.     var ty = b;
  6.     var d = b*b + a*a*(-b + 0.25);
  7.     var mx = a * a / Math.sqrt(a * a + b * b);

  8.     while(tx <= mx) {
  9.         if(d < 0) {
  10.             d += b * b * (2 * tx + 3);
  11.         } else {
  12.             ty--;
  13.             d += b * b * (2 * tx + 3) + 2 * a * a * (1 - ty);
  14.             
  15.         }

  16.         tx++;
  17.         setPix(x + tx, y + ty);
  18.         setPix(x + tx, y - ty);
  19.         setPix(x - tx, y + ty);
  20.         setPix(x - tx, y - ty);
  21.     }

  22.     d = b * b * (tx + 0.5) * (tx + 0.5) + a * a * (ty - 1) * (ty - 1) - a * a * b * b;
  23.     while (ty > 0) {
  24.         if (d < 0) {
  25.             tx++;
  26.             d += b*b*(2 * tx + 2) + a*a*(-2 * ty + 3);
  27.         }
  28.         else {
  29.             d += a*a*(-2 * ty + 3);
  30.         }
  31.         ty--;
  32.         setPix(x + tx, y + ty);
  33.         setPix(x - tx, y + ty);
  34.         setPix(x + tx, y - ty);
  35.         setPix(x - tx, y - ty);
  36.     }

  37.     context.putImageData(data, 0, 0);

  38.     function setPix(x, y){
  39.         console.log(x, y);
  40.         var index = getStartIndex(x, y);
  41.         for(var i = 0; i< 4; i++) {
  42.             if(i == 3) {
  43.                 imageData[index + i] = 255;
  44.             }
  45.             else{
  46.                 imageData[index + i] = 128;
  47.             }
  48.         }
  49.     }

  50.     function getStartIndex(x, y) {
  51.         return y * 800 * 4 + x * 4;
  52.     }
  53. }
復制代碼

  給個結果圖~

6.jpg

  光柵法的原理在這里就不說啦,那個說的話篇幅很大,在這里也不推薦用光柵法去畫橢圓,針對不同線寬很麻煩

  ok這篇文章就到這啦,Thanks~

  原創文章轉載請注明:轉載自AlloyTeam:http://www.alloyteam.com/2015/07/canvas-hua-tuo-yuan-di-fang-fa/

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中,因此性能還取決于JavaScript解釋器的效率,指定的FPS幀速在低性能解釋器中可能不會達到,所以這部分不是開發者能夠決定的,開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器,需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。,HTML5中國,中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富,HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端,他們覬覦移動原生應用人性化的操作體驗,特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品,或者是一個作品集,又或者僅僅只是一個靈感。在你發布到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那么回事。那么你接下
H5廣告,包括H5廣告的設計流程,究竟有什么講究,和階段。為了能幫助更多的人了解H5廣告,我專門做了一個講義。同時,也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有:框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 小青瓦丨古建筑瓦丨青瓦厂家-宜兴市徽派古典建筑材料有限公司 | 定硫仪,量热仪,工业分析仪,马弗炉,煤炭化验设备厂家,煤质化验仪器,焦炭化验设备鹤壁大德煤质工业分析仪,氟氯测定仪 | 宁夏档案密集柜,智能密集柜,电动手摇密集柜-盛隆柜业宁夏档案密集柜厂家 | 清水-铝合金-建筑模板厂家-木模板价格-铝模板生产「五棵松」品牌 | 耐驰泵阀管件制造-耐驰泵阀科技(天津)有限公司 | 工业铝型材-铝合金电机壳-铝排-气动执行器-山东永恒能源集团有限公司 | 苏商学院官网 - 江苏地区唯一一家企业家自办的前瞻型、实操型商学院 | 安平县鑫川金属丝网制品有限公司,声屏障,高速声屏障,百叶孔声屏障,大弧形声屏障,凹凸穿孔声屏障,铁路声屏障,顶部弧形声屏障,玻璃钢吸音板 | 紫外线老化试验箱_uv紫外线老化试验箱价格|型号|厂家-正航仪器设备 | 精益专家 - 设备管理软件|HSE管理系统|设备管理系统|EHS安全管理系统 | 智能型高压核相仪-自动开口闪点测试仪-QJ41A电雷管测试仪|上海妙定 | 彩超机-黑白B超机-便携兽用B超机-多普勒彩超机价格「大为彩超」厂家 | 篷房|仓储篷房|铝合金篷房|体育篷房|篷房厂家-华烨建筑科技官网 知名电动蝶阀,电动球阀,气动蝶阀,气动球阀生产厂家|价格透明-【固菲阀门官网】 | 贵阳用友软件,贵州财务软件,贵阳ERP软件_贵州优智信息技术有限公司 | 耐火浇注料-喷涂料-浇注料生产厂家_郑州市元领耐火材料有限公司 耐力板-PC阳光板-PC板-PC耐力板 - 嘉兴赢创实业有限公司 | PAS糖原染色-CBA流式多因子-明胶酶谱MMP-上海研谨生物科技有限公司 | 天助网 - 中小企业全网推广平台_生态整合营销知名服务商_天助网采购优选 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 聚氨酯保温钢管_聚氨酯直埋保温管道_聚氨酯发泡保温管厂家-沧州万荣防腐保温管道有限公司 | 英国雷迪地下管线探测仪-雷迪RD8100管线仪-多功能数字听漏仪-北京迪瑞进创科技有限公司 | 浩方智通 - 防关联浏览器 - 跨境电商浏览器 - 云雀浏览器 | SMN-1/SMN-A ABB抽屉开关柜触头夹紧力检测仪-SMN-B/SMN-C-上海徐吉 | 铝板冲孔网,不锈钢冲孔网,圆孔冲孔网板,鳄鱼嘴-鱼眼防滑板,盾构走道板-江拓数控冲孔网厂-河北江拓丝网有限公司 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 合肥钣金加工-安徽激光切割加工-机箱机柜加工厂家-合肥通快 | 日本细胞免疫疗法_肿瘤免疫治疗_NK细胞疗法 - 免疫密码 | 卧涛科技有限公司科技项目申报公司|高新技术企业申报|专利申请 | 美缝剂_美缝剂厂家_美缝剂加盟-地老板高端瓷砖美缝剂 | 中开泵,中开泵厂家,双吸中开泵-山东博二泵业有限公司 | 除尘布袋_液体过滤袋_针刺毡滤料-杭州辉龙过滤技术有限公司 | 工程管道/塑料管材/pvc排水管/ppr给水管/pe双壁波纹管等品牌管材批发厂家-河南洁尔康建材 | elisa试剂盒-PCR试剂盒「上海谷研实业有限公司」 | 铝镁锰板_铝镁锰合金板_铝镁锰板厂家_铝镁锰金属屋面板_安徽建科 | 安规电容|薄膜电容|陶瓷电容|智旭JEC安规电容厂家 | 舞台木地板厂家_体育运动木地板_室内篮球馆木地板_实木运动地板厂家_欧氏篮球地板推荐 | 插针变压器-家用电器变压器-工业空调变压器-CD型电抗器-余姚市中驰电器有限公司 | 冷热冲击试验箱_温度冲击试验箱价格_冷热冲击箱排名_林频厂家 | 气动机械手-搬运机械手-气动助力机械手-山东精瑞自动化设备有限公司 | 中药超微粉碎机(中药细胞级微粉碎)-百科 | 智能电表|预付费ic卡水电表|nb智能无线远传载波电表-福建百悦信息科技有限公司 | 天坛家具官网|