RichM499
Daemon Poster
- Messages
- 783
- Location
- Spaceballs Mega-Maid
I am building a website and could use your help. I am new to programming languages and so far I have learned the basics of HTML, CSS, JavaScript, Python, Ruby, PHP, and jQuery if you can count that one... I am trying to animate this happy face and I would like to make him responsive to mouse movements but I'm unsure which JavaScript library would be the best for what I want to do.
Any suggestions or information about JavaScript animation with HTML and CSS would be greatly appreciated. I'll paste my JS code in here so you can offer suggestions based on what I have done so far.
EDIT: I'm going to be researching it. I've only been doing this stuff a month or so but when I find the info I'm looking for I'll be sure to update this thread.
EDIT2: I am going to try a couple of for and while loops and see if I can come up with any animations for it )
Any suggestions or information about JavaScript animation with HTML and CSS would be greatly appreciated. I'll paste my JS code in here so you can offer suggestions based on what I have done so far.
EDIT: I'm going to be researching it. I've only been doing this stuff a month or so but when I find the info I'm looking for I'll be sure to update this thread.
EDIT2: I am going to try a couple of for and while loops and see if I can come up with any animations for it )
Code:
window.onload = draw;
function draw() {
x = prompt("Please enter your name?");
if(true){
var a_canvas = document.getElementById("canvas");
var face = a_canvas.getContext("2d");
face.fillStyle = "gold";
face.beginPath();
face.arc(200, 100, 40, 0, 2*Math.PI);
// horiz vert siz
face.closePath();
face.fill();
face.lineWidth = 2;
face.stroke();
face.fillStyle = "black";
var leye = a_canvas.getContext("2d");
leye.beginPath(); // leye
leye.arc(185, 85, 5, 0, 2*Math.PI);
leye.closePath();
leye.fill();
var reye = a_canvas.getContext("2d");
reye.beginPath(); // reye
reye.arc(205, 92, 5, 0, 2*Math.PI);
reye.closePath();
reye.fill();
var mout = a_canvas.getContext("2d");
mout.beginPath();
mout.arc(190, 117, 20, Math.PI, 2*Math.PI, true);
mout.closePath();
mout.fill();
var context = a_canvas.getContext("2d");
context.font = "30px Comic Sans MS";
context.fillText("Hello, and welcome to my site " + x+" !!",112,175);
}else{
console.log("<p class='herp'><a href='http://www.google.com'>Google...</p></a>" + "<br />");
}
};
Last edited: