Use canvas to draw a rectangle, circle, and line [html] <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> canvas example </title> <script type =" text/javascript "> function mydrawRect () {var canvas = document. getElementById ("rect"); if (canvas = null) {return false;} var context = canvas. getContext ('2d '); context. fillStyle = "# EEEEFF"; context. fillRect (0,0, 400,300); context. fillStyle = "red"; context. strokeStyle = "blue"; context. lineWidth = 1; // draw a rectangular context. fillRect (50, 50, 100,100); context. strokeRect (50, 50, 100,100); // draw a circle context. beginPath (); context. arc (200,200, 50, 0, Math. PI * 2, true); context. closePath (); context. fillStyle = 'rgba (0.25, 0,) '; context. fill (); // draw a straight-line context. beginPath (); context. VPC: moveTo (100,100); context. lineTo (100,300); context. lineTo (300,300); context. closePath (); // context. fillStyle = 'rgba (0.25, 0,) '; // context. fill (); context. stroke () ;}</script>
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
