Home > Developer > JavaScript
HTML5 JavaScript canvas API draw line, draw diagonal lines
<! Doctype HTML> <title> HTML5 JavaScript canvas API draw lines and draw diagonal lines </title> <body> <canvas id = "Diagonal" style = "border: 1px solid; "width =" 200 "Height =" 200 "> </canvas> <canvas id =" diagonal_line "style =" border: 1px solid; "width =" 200 "Height =" 200 "> </canvas> <canvas id =" diagonal_x "style =" border: 1px solid; "width =" 200 "Height =" 200 "> </canvas> <br> // a canvas element with a solid border <SCRIPT> function drawdiagonalline () {var canvas = document. getelementbyid ('diagonal _ line'); // obtain the canvas object var context = canvas. getcontext ('2d '); // get the context of the canvas. beginpath (); context. moveTo (0, 0); context. lineto (140,70); context. stroke () ;}drawdiagonalline (); // draw X-ray function drawx () {var canvas = document. getelementbyid ('diagonal _ x'); var context = canvas. getcontext ('2d '); context. beginpath (); // draw \ context. moveTo (0, 0); context. lineto (200,200); // draw/context. VPC: moveTo (0,200); context. lineto (200,0); context. stroke () ;}drawx (); // draw a translate to redefine the coordinate origin function drawtranslate () {var canvas = document. getelementbyid ('diagonal _ translate'); var context = canvas. getcontext ('2d '); context. save (); context. translate (70,140); context. beginpath (); context. moveTo (0, 0); context. lineto (70,-70); context. stroke (); context. resore ();} // drawtranslate (); window. addeventlistener ("LOAD", drawtranslate, true); </SCRIPT> <canvas id = "diagonal_translate" style = "border: 1px solid; "width =" 200 "Height =" 200 "> </canvas> </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
