首頁 > 開發者 > 網站開發

HTML5 在canvas中繪製複雜形狀

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   class   blog   code   java   http   

卿篤軍

原文地址：http://blog.csdn.net/qingdujun/article/details/32942667


一、繪製複雜形狀或路徑

    在簡單的矩形不能滿足需求的情況下，繪圖環境提供了如下方法來繪製複雜的形狀或路徑。

  • beginPath()  ： 開始繪製一個新路徑。
  • closePath()  ： 通過繪製一條當前點到路徑起點的線段來閉合形狀。
  • fill() ， stroke()  ： 填充形狀或繪製空心形狀。
  • moveTo()  ： 將當前點移動到點(x,y)。
  • lineTo()  ： 從當前點繪製一條直線到點(x,y)。
  • arc(x,y,r,sAngle,eAngle,counterclockwise)  ： 繪製一條指定半徑的弧到點(x,y)。

二、用這些方法繪製複雜形狀需遵循以下步驟

  1. 使用beginPath()方法開始繪製路徑。
  2. 使用moveTo()、lineTo()、arc()、方法建立線段。
  3. 使用closePath()結束繪製並閉合形狀（可選）。
  4. 使用stroke()或fill()繪製路徑的外邊框或填充形狀。使用fill()會自動閉合所有未閉合路徑。

三、弧arc()繪製說明



四、在canvas中繪製複雜形狀

<!--<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤之前。--><!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset = utf-8"><title>HTML5</title><script type="text/javascript" charset = "utf-8">//這個函數將在頁面完全載入後調用function pageLoaded(){//擷取canvas對象的引用,注意tCanvas名字必須和下面body裡面的id相同var canvas = document.getElementById('tCanvas');//擷取該canvas的2D繪圖環境var context = canvas.getContext('2d');//繪製代碼將出現在這裡//繪製複雜性豬//填充三角形context.beginPath();context.moveTo(10,120);//從(10,20開始)context.lineTo(10,180);//表示從(10,120)開始，畫到(10,180)結束context.lineTo(110,150);//表示從(10,180)開始，畫到(110,150)結束context.fill();//閉合形狀並且以填充方式繪製出來//三角形的外邊框context.beginPath();context.moveTo(140,160);//從點(140,160)開始context.lineTo(140,220);context.lineTo(40,190);context.closePath(); //關閉路徑context.stroke(); //以空心填充//一個複雜的多邊形context.beginPath();context.moveTo(160,160);//從點(160,160)開始context.lineTo(170,220);context.lineTo(240,210);context.lineTo(260,170);context.lineTo(190,140);context.closePath();context.stroke();//繪製弧//繪製半圓弧context.beginPath();//在(100,300)處逆時針畫一個半徑為40，角度從0到180°的弧線context.arc(100,300,40,0*Math.PI,1*Math.PI,true); //PI的弧度是180°context.stroke();//畫一個實心圓context.beginPath();//在(100,300)處逆時針畫一個半徑為30，角度為0到360°的弧context.arc(100,300,30,0*Math.PI,2*Math.PI,true);//2*Math.PI是360°context.fill();//畫一個3/4弧context.beginPath();//在(200,300)處順時針畫一個半徑為25，角度為0到270°的弧context.arc(200,300,25,0*Math.PI,3/2*Math.PI,false);context.stroke();}</script></head><body onload="pageLoaded();"><canvas width = "400" height = "400" id = "tCanvas" style = "border:black 1px solid;"> <!--如果瀏覽器不支援則顯示如下字型-->提示：你的瀏覽器不支援<canvas>標籤</canvas></body></html>

五、繪製效果



參考文獻：(印)香卡(Shankar,A.R.)(作者).謝光磊(譯者).HTML5遊戲開發進階指南[M].北京：電子工業出版社，2013.6-8.

W3School.HTML5canvas arc()方法[CP/OL].http://www.w3school.com.cn/tags/canvas_arc.asp,?/2014-06-21.

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More