HTML Coding
For this assignment I chose to code the apple logo. The hardest part about this was the bulge on the left side of the apple. I had to change it from a quadratic to a bezier curve a few times.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//stem//
context.beginPath();
context.moveTo(500, 15);
context.quadraticCurveTo(375, 25, 378, 149);
context.quadraticCurveTo(500, 149, 500, 15);
context.fillStyle = "black";
context.fill();
context.strokeStyle ="black";
context.stroke();
//apple//
context.beginPath();
context.moveTo(605, 205);
context.quadraticCurveTo(500, 125, 378, 175);
context.quadraticCurveTo(275, 125, 175, 205);
context.bezierCurveTo(116, 245, 116, 405, 175, 475);
context.quadraticCurveTo(280, 600, 350, 573);
context.quadraticCurveTo(400, 550, 450, 575);
context.quadraticCurveTo(500, 600, 600, 430);
context.quadraticCurveTo(480, 323, 605, 205);
context.closePath();
context.fillStyle = "black";
context.fill();
context.strokeStyle ="black";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Original Logo:
Original Logo:
Comments
Post a Comment