Home > Developer > JavaScript
HTML5 JavaScript canvas API draw tree pattern
<! Doctype HTML> <title> HTML5 JavaScript canvas API draws a tree pattern </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 ); // ========================================/// broaden the context of the line. linewidth = 4; // The context of the smooth path. linejoin = 'round '; // change the color to brown context. strokestyle = '#663300'; // set the fill color to green and fill the canopy context. fillstyle = '#339900'; context. fill (); // ==============================/// draw the trunk 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); // The first curve is bent to the upper right corner of the context. quadraticcurveto (170,-50,260,-190); // The second curve is bent to the lower right of the 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 learning 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> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
