Using HTML 5 canvas and javascript. I\'m having trouble with the javascript to c
ID: 3668832 • Letter: U
Question
Using HTML 5 canvas and javascript.
I'm having trouble with the javascript to create the objects and move them mainly.
Create an arrow and place it at 100, 100 coordinates on the canvas. Set the fill color of the arrow to ‘#ffccdd’. Rotate the arrow to the direction of the mouse pointer on the canvas at all times.
Create a ball in 50 radius. Set the ball’s color to ‘#ffccdd’, and its line width to 2px. Place the ball at the center of the canvas. Make the ball move on a circular path on the canvas. The size of the circular path should be 200px in diameter.
Create a rectangular box in 6px by 6px size, and place the box at the center of the canvas. Set the fill color of the box to ‘#cc00ee’. Then, draw a line from the center of the box to wherever the mouse pointer is on the canvas. Update the drawn line continuously to reflect the constantly moving position of the mouse pointer. Calculate the length of the line, and print the calculated length in a textarea on the document. Update the printed length to reflect the length of the newly drawn line between the center of the box and the mouse pointer updated.
Explanation / Answer
<!DOCUMENTTYPE HTML>
<html>
<head>
<title>
Hello
</title>
</head>
<body>
<h1>hello1</h1>
<script>
function drawArrow(fromx, fromy, tox, toy){
//variables to be used when creating the arrow
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var headlen = 10;
var angle = Math.atan2(toy-fromy,tox-fromx);
//starting path of the arrow from the start square to the end square and drawing the stroke
ctx.beginPath();
ctx.moveTo(fromx, fromy);
ctx.lineTo(tox, toy);
ctx.strokeStyle = "#cc0000";
ctx.lineWidth = 22;
ctx.stroke();
//starting a new path from the head of the arrow to one of the sides of the point
ctx.beginPath();
ctx.moveTo(tox, toy);
ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));
//path from the side point of the arrow, to the other side point
ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/7),toy-headlen*Math.sin(angle+Math.PI/7));
//path from the side point back to the tip of the arrow, and then again to the opposite side point
ctx.lineTo(tox, toy);
ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));
//draws the paths created above
ctx.strokeStyle = "#cc0000";
ctx.lineWidth = 22;
ctx.stroke();
ctx.fillStyle = "#cc0000";
ctx.fill();
}
function RTEShape()
{
this.x = 50;
this.y = 50;
this.w = 100; // default width and height?
this.h = 100;
this.fill = '#444444';
this.text = "Test String";
this.type;
this.color;
this.size = 6;
// The selection color and width. Right now we have a red selection with a small width
this.mySelColor = '#CC0000';
this.mySelWidth = 2;
this.mySelBoxColor = 'darkred';// New for selection boxes
this.mySelBoxSize = 6;
}
RTEShape.prototype.buildArrow = function(canvas)
{
this.type = "arrow";
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
var + (this.w/3);
var twoThirdX = this.x + ((this.w*2)/3);
var - (this.y/5);
var twoFifthY = this.y - ((this.y*3)/5);
/**/
//ctx.beginPath();
ctx.moveTo(oneThirdX,this.y); // 125,125
ctx.lineTo(oneThirdX,oneFifthY); // 125,105
ctx.lineTo(this.x*2,oneFifthY); // 225,105
ctx.lineTo(this.x*2,twoFifthY); // 225,65
ctx.lineTo(oneThirdX,twoFifthY); // 125,65
ctx.lineTo(oneThirdX,(this.y/5)); // 125,45
ctx.lineTo(this.x,(this.y+(this.y/5))/2); // 45,85
ctx.fillStyle = "green";
ctx.fill();
ctx.fillStyle = "yellow";
ctx.fillRect(this.x,this.y,this.w,this.h);
} else {
alert('Error on buildArrow! '+err.description);
}
}
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.