Canvas drawing cylindrical graphs, drawing shape center rotation

<! DOCTYPE html>varCVS = document.getElementById (' CVS ')); varCTX = Cvs.getcontext (' 2d '); Ctx.strokestyle= ' Blue '; Ctx.linewidth= ' 2 '; //set the origin point        varOriginal = {x:40,y:260}; //Set coordinates        varBottomRight = {x:360,y:260}; varBottomtop = {x:40,y:40};        Ctx.beginpath (); //X-AxisCtx.moveto (ORIGINAL.X,ORIGINAL.Y);        Ctx.lineto (BOTTOMRIGHT.X,BOTTOMRIGHT.Y); Ctx.lineto (Bottomright.x-15,bottomright.y-10); Ctx.moveto (Bottomright.x-15,bottomright.y+10);        Ctx.lineto (BOTTOMRIGHT.X,BOTTOMRIGHT.Y); //Y-AxisCtx.moveto (ORIGINAL.X,ORIGINAL.Y);        Ctx.lineto (BOTTOMTOP.X,BOTTOMTOP.Y); Ctx.lineto (bottomtop.x+10,bottomtop.y+15); Ctx.moveto (bottomtop.x-10,bottomtop.y+15);        Ctx.lineto (BOTTOMTOP.X,BOTTOMTOP.Y); varAvgwidth = 58; varRectwidth = 36;  for(vari=0;i<5;i++){
If i==0, do not draw the scaleif(i>0) {Ctx.moveto (original.x+avgwidth*i,original.y); Ctx.lineto (original.x+avgwidth*i,original.y-10); }            //cylindrical x-coordinate            varRectx = avgwidth*i+ (avgwidth-rectwidth)/2;//Height of column            varRECTH = Math.floor (Math.random () *260); //Draw histogram (x coordinate, y coordinate, width, height)Ctx.fillrect (original.x+rectx,original.y-recth,rectwidth,recth);    } ctx.stroke (); </script></body>
How to rotate the shape center
<! DOCTYPE html>//1. Get the canvas  varCVS = document.getElementById (' CVS ')); //2. Get Context  varCTX = Cvs.getcontext (' 2d '); //6. How to make an animationSetInterval (draw,20); //7. Offset Canvas: Reset canvas Origin 0,0  //Conclusion: 1) The offset, width and height are the general pattern width and height respectively.  //Conclusion: 2) The graphic position should be set to offset *-1Ctx.translate (100,50); //Draw function: Executes once every 20 milliseconds  functionDraw () {//3. Eraser Empty CanvasCtx.clearrect ( -200,-150,400,300); //4. Popularize mathematical angles and radians    //Radian and Angle conversion formula: radians = angle * math.pi/180    //Rotate 30 degreesCtx.rotate (1*math.pi/180);//5. Draw a rectangle, located at 0,0, width highCtx.fillrect ( -100,-50,200,100); }</script></body>
Lucky Carousel Spin Case:
<! DOCTYPE html>#lotteryContainer {text-Align:center;            } #startLottery {width:280px;            Height:3em;            border:1px solid #aaaaaa; Border-radius:8px;            Cursor:pointer; margin:10px0; Outline:0;        } #startLottery: hover{background: #ccc; }    </style> <script src= "Jquery-1.11.1.js" ></script>varasimgloaded =false;//identifier Indicates whether the carousel material is loaded or not    varpinimgloaded =false;//Indicates whether the pointer loading is complete or not    varasimg;//Disc Picture Object    varpinimg;//pointer Picture Object$(function(){        //picture of the big turntableAsimg =NewImage (); ASIMG.SRC= ' Img/as.png '; //Confirm Picture Loading completeAsimg.onload =function() {asimgloaded=true; //To determine that the pointer load is complete to perform initialization            if(pinimgloaded = =true) {initlottery (); }        }        //pointer PicturePinimg =NewImage (); PINIMG.SRC= ' Img/pin.png '; Pinimg.onload=function() {pinimgloaded=true; //To determine the disk load to complete execution of initialization            if(asimgloaded = =true) {initlottery ();    }        }    }); functionInitlottery () {//Initialize button$ (' #startLottery '). html (' start Draw '). Click (function(){            //generates a random rotation time between 4000-9000 milliseconds            varDuration = (Math.random () *4+4) *1000; //start rotation time of the turntable            varStartTime =NewDate (). GetTime (); //defines a variable for the angle of the canvas, saving the degree of current that should be rotated            varangle = 0;//the angle that has been rotated, initially 0, indicates no rotation            //start the lottery, start the turntable.            varTimer = SetInterval (function() {Ctx.clearrect (-cw/2,-ch/2, Cw,ch); //draw discs and pointers                //1. Rotate the canvasAngle + = 5;//record the current rotation degree value of the turntableCtx.rotate (angle*math.pi/180);//2. Draw the discCtx.drawimage (ASIMG,-CW/2,-CH/2); //3. Rotate the canvas in reverseCtx.rotate (-angle*math.pi/180);//4. Draw the pointerCtx.drawimage (pinimg,-cw/2+80,-ch/2+90); //determine if the rotation should stop.                varnow =NewDate (). GetTime (); if(Now-starttime >duration) {                    //Stop Timerclearinterval (timer); }            },20);        }); //draw the turntable and the pointer to the canvas        varCVS = $ (' #cvs ') [0]; varCTX = Cvs.getcontext (' 2d '); //the height of the canvas        varCW =Cvs.width; varCH =Cvs.height; //Set OffsetCtx.translate (CW/2,CH/2); //Draw DiscCtx.drawimage (ASIMG,-CW/2,-CH/2); Ctx.drawimage (pinimg,-cw/2+80,-ch/2+90); }</script></body>
Canvas drawing cylindrical graphs, drawing shape center rotation