Javascript+canvas to realize Chiseban effect example _javascript technique

This article illustrates the effect of Javascript+canvas implementation Chiseban. Share to everyone for your reference, specific as follows:

The effect chart is as follows:

Html:

<canvas id= "Canvas" class= "Canvas" width= "" "Height=" ></canvas>

Css:

html,body{margin:0;padding:0}
. canvas{display:block; margin-left:auto;margin-right:auto;margin-top:50px;}

Javascript:

var disk = [{area:[{x:0,y:0},{x:600,y:0},{x:300,y:300}], color: "#CBF263"}, {area:[{x:0,
      Y:0},{X:0,Y:600},{X:300,Y:300}], color: "#5CB6D0"}, {area:[{x:0,y:600},{x:300,y:600},{x:150,y:450}], Color: "#FE9CCD"}, {area:[{x:150,y:450},{x:300,y:300},{x:450,y:450},{x:300,y:600}], color: "#A69 6c3 "}, {area:[{x:300,y:600},{x:600,y:600},{x:600,y:300}], color:" #FBC421 "}, {area:[{ X:600,Y:300},{X:600,Y:0},{X:450,Y:150},{X:450,Y:450}], color: "#FF5061"}, {area:[{x:450,y:450},{x:450 , y:150},{x:300,y:300}], color: "#FDEA11"}] window.onload = function () {var canvasdom = Document.getelementb
    Yid ("Canvas");
    var ctx = Canvasdom.getcontext ("2d");
      Drawdisk (DISK,CTX)} function Drawdisk (DISK,CTX) {for (var i = 0;i<disk.length;i++) {Ctx.beginpath ();
      Ctx.moveto (DISK[I].AREA[0].X,DISK[I].AREA[0].Y); for (var j = 1;j<disk[i]["area")"].length;j++" {Ctx.lineto (DISK[I].AREA[J].X,DISK[I].AREA[J].Y);
      } ctx.closepath ();
      Ctx.fillstyle = disk[i]["Color"];
    Ctx.fill ();

 }
}

For more information on JavaScript-related content readers can view the site topics: "JavaScript animation effects and tips Summary", "JavaScript expansion skills Summary", "JavaScript movement effect and Skills summary", " A summary of JavaScript mathematical operational usage and the JavaScript-oriented introductory tutorial

I hope this article will help you with JavaScript programming.