html5 javascript canvas API 繪製樹形圖案A

最後更新：2018-12-03 來源：互聯網

上載者：User

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

<!DOCTYPE html><html><title>html5 javascript canvas API 繪製樹形圖案A</title><body><canvas id="diagonal" style="border:1px solid;" width="400" height="400"></canvas> <script type="text/javascript">      function createCanopyPath(context){                  context.beginPath();                                   context.moveTo(-25,-50);                 context.lineTo(-10,-80);                 context.lineTo(-20,-80);                 context.lineTo(-5,-110);                 context.lineTo(-15,-110);                 context.lineTo(0,-140);                 context.lineTo(15,-110);                 context.lineTo(5,-110);                 context.lineTo(20,-80);                 context.lineTo(10,-80);                 context.lineTo(25,-50);                 context.closePath();        }        function drawTrails(){                var canvas=document.getElementById('diagonal');                var context=canvas.getContext('2d');                                context.save();                context.translate(130,250);                                createCanopyPath(context);                //==========================                //加寬線條                context.lineWidth=4;                //平滑路徑的接合點                context.lineJoin='round';                //將顏色改成棕色                context.strokeStyle='#663300';                                //將填充色設定為綠色並填充樹冠                context.fillStyle='#339900';                context.fill();                //==========================                //畫樹榦                context.fillStyle='#663300';                context.fillRect(-5,-50,10,50);                //==========================                context.stroke();                context.restore();                //----------------------------------                context.save();                context.translate(-10,350);                context.beginPath();                context.moveTo(0,0);                //第一條曲線向右上方彎曲                context.quadraticCurveTo(170,-50,260,-190);                //第二條曲線向右下方彎曲                context.quadraticCurveTo(310,-250,410,-250);                context.strokeStyle='#663300';                context.lineWidth=20;                context.stroke();                context.restore();                //-----------------------------------        } window.addEventListener("load",drawTrails,true);</script>http://www.cnblogs.com/TerryBlog/archive/2012/02/27/2370048.html<br>html5學習網址url:<br><a href='http://www.cnblogs.com/TerryBlog/archive/2012/02/27/2370048.html'>http://www.cnblogs.com/TerryBlog/archive/2012/02/27/2370048.html</a></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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