Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>css3-canvas canvas (lines) </title>
<script>
Window.onload=function () {
var Canvas=document.getelementbyid ("Canvas");//Get the Canvas object
var Ctx=canvas.getcontext ("2d"); Create a two-dimensional drawing context object
To draw by invoking a property or method from a context object
Ctx.beginpath ();//"Beginpath ()" table starts a path or resets the current path
ctx.linecap= "Round";//Fillet line
Ctx.moveto (5,100);//Start point coordinates
Ctx.lineto (200,300);//end point coordinates
ctx.linewidth=20;//"LineWidth" defines the width of the path (with inheritance, if the path to define a different width is defined separately)
Ctx.strokestyle= "LightBlue";//The Color of the "Strokestyle" Fill path
Ctx.stroke ();//Invoke Draw
Ctx.beginpath ();//"Beginpath ()" table starts a path or resets the current path
ctx.linecap= "Round";//Fillet line
Ctx.moveto (30,30);//Start point coordinates
Ctx.lineto (300,300);//end point coordinates
ctx.linewidth=20;//"LineWidth" defines the width of the path (with inheritance, if the path to define a different width is defined separately)
Ctx.strokestyle= "Lightpink";//The Color of the "Strokestyle" Fill path
Ctx.stroke ();//Invoke Draw
Ctx.beginpath ();//"Beginpath ()" table starts a path or resets the current path
ctx.linecap= "Square";//Square line
Ctx.moveto (10,50);//Start point coordinates
Ctx.lineto (350,400);//end point coordinates
Ctx.strokestyle= "LightGreen";//The color of the fill path
Ctx.stroke ();//Invoke Draw
}
</script>
<body>
<canvas id= "Canvas" width= "height=" style= "border:1px solid Red" >
Browser does not support canvas
</canvas>
</body>Css3-canvas Canvas (lines)
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
