<! DOCTYPE html5>
<meta charset= "UTF-8" >
<title>css3-canvas Canvas (Graphics-triangles) </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
Ctx.beginpath ();
ctx.linewidth=20;
ctx.linejoin= "Round"; Corner type at intersection of two lines (miter corner default bevel bevel round fillet)
Ctx.moveto (10,10);
Ctx.lineto (100,100);
Ctx.lineto (400,10);
Ctx.lineto (10,10);
Ctx.closepath (); Closepath () Close path closure
Ctx.strokestyle= "Blue";//Strokestyle can only fill the color of the path
Ctx.fillstyle= "Red";//FillStyle fills the font color, fills the path area, and the graphics area
Ctx.fill ();//Fill () fills the font
Ctx.stroke ();
}
</script>
<body>
<canvas id= "Canvas" width= "height=" style= "border:1px solid Red" >
Browser does not support canvas
</canvas>
</body>
Css3-canvas Canvas (Graphics-triangles)