wwb00
  • wwb00
JavaScript HTML5 Canvas Rotate Errors
Computer Science
  • Stacey Warren - Expert brainly.com
Hey! We 've verified this expert answer for you, click below to unlock the details :)
SOLVED
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
katieb
  • katieb
I got my questions answered at brainly.com in under 10 minutes. Go to brainly.com now for free help!
wwb00
  • wwb00
The rotate command is leaking into the later code. Also, the triangles move when they rotate. This should not be happening. Thanks, wwb00. var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); function drawRays(a,b,c,d,e){ var numberOfRays = 8; for(i=0;i<(8);i++){ ctx.beginPath(); ctx.strokeStyle = e; ctx.rotate((((360/numberOfRays)-numberOfRays)*i)*Math.PI/180); ctx.rect(a,b,c,d); ctx.stroke(); ctx.fillStyle = e; ctx.fill(); ctx.closePath(); } } drawRays(215,148.875,50,0.5,"#ffd633");
wwb00
  • wwb00
wwb00
  • wwb00
@dan815

Looking for something else?

Not the answer you are looking for? Search for more explanations.

More answers

wwb00
  • wwb00
@UnkleRhaukus @zepdrix @whpalmer4 @jagr2713
wwb00
  • wwb00
I can post the HTML if it makes it easier to test.
wwb00
  • wwb00
Canvas

Canvas Practice

House

Your browser does not support the canvas app

woodrow73
  • woodrow73
Semi-colon missing after drawTriangle() in house.js And there is a way to reset the canvas rotations via the context's save(); restore(); methods. You can save(); the context before you make a rotational change, and restore(); the context when you wish to restore it's old values. (by the way, code in openstudy can be encased in 3 ``` ontop & on bottom to format it) ``` drawBackground("#3e9aff");//colour drawHouse(600,300,360,250,2);//(x,-y,length,width,pWidth) drawTriangle(560,300,780,200,1000,300,"#994c00");//((a,b)(c,d)(e,f)g=colour drawCircle(150,150,50,"#ffd633");//based on centre-(x,-y,radius,colour); ctx.save(); drawRays(215,148.875,50,0.5,"#ffd633"); ctx.restore(); drawGround("green");//colour ``` This should do the trick for the ground issue. Also, the rotate function does not focus on individual elements sadly, which is why the rays appear to run away from you... However, I stumbled on a brilliant stackexchange post which provides a method to solve just that: (the post with 35 upvotes): http://stackoverflow.com/questions/2677671/how-do-i-rotate-a-single-object-on-an-html-5-canvas ``` function drawImageRot(img,x,y,width,height,deg){ //Convert degrees to radian var rad = deg * Math.PI / 180; //Set the origin to the center of the image ctx.translate(x + width / 2, y + height / 2); //Rotate the canvas around the origin ctx.rotate(rad); //draw the image ctx.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height); //reset the canvas ctx.rotate(rad * ( -1 ) ); ctx.translate((x + width / 2) * (-1), (y + height / 2) * (-1)); } //by stackexchange user: user1602942 ``` I restructured it a bit to work for boxes: ``` function drawBoxRot(x,y,width,height,deg,colour){ //save canvas state prior to manipulation ctx.save(); //Convert degrees to radian var rad = deg * Math.PI / 180; //Set the origin to the center of the box ctx.translate(x + width / 2, y + height / 2); //Rotate the canvas around the origin ctx.rotate(rad); //color the box ctx.fillStyle = colour; //draw the box ctx.fillRect(width / 2 * (-1),height / 2 * (-1),width,height); //reset the canvas ctx.restore(); } ``` (I also added the save() restore() calls at the beginning and end of all the functions) I'm not particularly good at geometry, but now since you can at least have the rotation act as you would expect it to, making the sun rays in a loop should be easier. http://jsbin.com/xiqucewanu/edit?html,js,output

Looking for something else?

Not the answer you are looking for? Search for more explanations.