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優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 北京网站建设公司_北京网站制作公司_北京网站设计公司-北京爱品特网站建站公司 | 彭世修脚_修脚加盟_彭世修脚加盟_彭世足疗加盟_足疗加盟连锁_彭世修脚技术培训_彭世足疗 | 磁力链接搜索神器_BT磁力狗_CILIMAO磁力猫_高效磁力搜索引擎2024 | 光栅尺厂家_数显表维修-苏州泽升精密机械 | 宝鸡市人民医院| 煤矿支护网片_矿用勾花菱形网_缝管式_管缝式锚杆-邯郸市永年区志涛工矿配件有限公司 | 海德莱电力(HYDELEY)-无功补偿元器件生产厂家-二十年专业从事电力电容器 | 电池挤压试验机-自行车喷淋-车辆碾压试验装置-深圳德迈盛测控设备有限公司 | 土壤肥料养分速测仪_测土配方施肥仪_土壤养分检测仪-杭州鸣辉科技有限公司 | 车件|铜件|车削件|车床加工|五金冲压件-PIN针,精密车件定制专业厂商【东莞品晔】 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 一技任务网_有一技之长,就来技术任务网| 常州企业采购平台_常州MRO采购公司_常州米孚机电设备有限公司 | 北京易通慧公司从事北京网站优化,北京网络推广、网站建设一站式服务商-北京网站优化公司 | 高精度-恒温冷水机-螺杆式冰水机-蒸发冷冷水机-北京蓝海神骏科技有限公司 | 智慧钢琴-电钢琴-便携钢琴-数码钢琴-深圳市特伦斯乐器有限公司 | 非甲烷总烃分析仪|环控百科| 致胜管家软件服务【在线免费体验】| 紫外可见光分光度计-紫外分光度计-分光光度仪-屹谱仪器制造(上海)有限公司 | 灌木树苗-绿化苗木-常绿乔木-价格/批发/基地 - 四川成都途美园林 | 刹车盘机床-刹车盘生产线-龙口亨嘉智能装备 | 口信网(kousing.com) - 行业资讯_行业展会_行业培训_行业资料 | 热处理炉-退火炉-回火炉设备厂家-丹阳市电炉厂有限公司 | 视觉检测设备_自动化检测设备_CCD视觉检测机_外观缺陷检测-瑞智光电 | Jaeaiot捷易科技-英伟达AI显卡模组/GPU整机服务器供应商 | 啤酒设备-小型啤酒设备-啤酒厂设备-济南中酿机械设备有限公司 | 二手Sciex液质联用仪-岛津气质联用仪-二手安捷伦气质联用仪-上海隐智科学仪器有限公司 | 苹果售后维修点查询,苹果iPhone授权售后维修服务中心 – 修果网 拼装地板,悬浮地板厂家,悬浮式拼装运动地板-石家庄博超地板科技有限公司 | 外贸网站建设-外贸网站设计制作开发公司-外贸独立站建设【企术】 | POS机官网 - 拉卡拉POS机免费办理|官网在线申请入口 | 超细粉碎机|超微气流磨|气流分级机|粉体改性设备|超微粉碎设备-山东埃尔派粉碎机厂家 | 原色会计-合肥注册公司_合肥代理记账公司_营业执照代办 | 浙江红酒库-冰雕库-气调库-茶叶库安装-医药疫苗冷库-食品物流恒温恒湿车间-杭州领顺实业有限公司 | 奇酷教育-Python培训|UI培训|WEB大前端培训|Unity3D培训|HTML5培训|人工智能培训|JAVA开发的教育品牌 | 薪动-人力资源公司-灵活用工薪资代发-费用结算-残保金优化-北京秒付科技有限公司 | 作文导航网_作文之家_满分作文_优秀作文_作文大全_作文素材_最新作文分享发布平台 | 谷歌关键词优化-外贸网站优化-Google SEO小语种推广-思亿欧外贸快车 | 许昌奥仕达自动化设备有限公司| 精密模具-双色注塑模具加工-深圳铭洋宇通 | 智能家居全屋智能系统多少钱一套-小米全套价格、装修方案 | 昆明化妆培训-纹绣美甲-美容美牙培训-昆明博澜培训学校 |