Wednesday, March 16, 2016

HTML Project


I know it doesn't look good. I had  a lot of trouble with this, even more than the vector. While creating shapes wasn't really a problem, I had a problem with the grid and curves. For some reason, the grid on my printed page didn't match up with the site. I had to do a lot of trial and error. The curves were also confusing, as I was constantly guessing where the curve was supposed to go.

Anyway, this is suppose to be a Jigglypuff. I added the hat, because I was having trouble with her ears and with her fluff on top. The background is just a gathering of random colors.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");


context.beginPath();
context.rect (0, 0, 800, 600);
var grd = context.createLinearGradient(0, 300, 800, 300)
grd.addColorStop(0, 'rgb(0, 0, 0)');
grd.addColorStop(.1, 'rgb(200, 120, 30)');
grd.addColorStop(.3, 'rgb(200, 100, 200)');
grd.addColorStop(.5, 'rgb(210, 210, 210)');
grd.addColorStop(.7, 'rgb(190, 180, 170)');
grd.addColorStop(.9, 'rgb(100, 0, 0)');
grd.addColorStop(1, 'rgb(255, 255, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();

context.beginPath();
context.arc (400, 250, 130, 0, 2*Math.PI, false);
context.fillStyle= 'rgb(250, 208, 222)';
context.fill();
context.lineWidth= 2;
context.stroke();

context.beginPath();
context.moveTo (530, 255)
context.quadraticCurveTo (625, 245, 521, 300);
context.fillStyle= 'rgb(255, 208, 222)';
context.fill();
context.lineWidth= 2;
context.stroke();

context.beginPath();
context.moveTo (350, 270);
context.quadraticCurveTo (400, 330, 325, 300)
context.stroke();

context.beginPath();
context.moveTo (383, 383);
context.bezierCurveTo (387, 387, 390, 390, 380, 400);
context.bezierCurveTo (250, 400, 360, 360, 383, 383);
context.fillStyle= 'rgb(255, 208, 222)';
context.fill();
context.lineWidth= 2;
context.stroke();

context.beginPath();
context.moveTo (435, 377)
context.bezierCurveTo (380, 382, 390, 390, 400, 400);
context.bezierCurveTo (405, 405, 410, 410, 455, 395);
context.quadraticCurveTo (480, 375, 420, 377);
context.fillStyle= 'rgb(255, 208, 222)';
context.fill();
context.lineWidth= 2;
context.stroke();

context.beginPath();
context.arc (360, 220, 40, 0, 2*Math.PI, false);
context.fillStyle= 'white';
context.fill();

context.beginPath();
context.arc (360, 210, 30, 0, 2*Math.PI, false);
context.fillStyle= 'teal';
context.fill();

context.beginPath();
context.arc (360, 200, 10, 0, 2*Math.PI, false);
context.fillStyle= 'white';
context.fill();

context.beginPath();
context.arc (450, 220, 40, 0, 2*Math.PI, false);
context.fillStyle= 'white';
context.fill();

context.beginPath();
context.arc (450, 210, 30, 0, 2*Math.PI, false);
context.fillStyle= 'teal'
context.fill();

context.beginPath();
context.arc (450, 200, 10, 0, 2*Math.PI, false);
context.fillStyle= 'white'
context.fill();

context.beginPath();
context.moveTo (375, 300);
context.quadraticCurveTo (410, 370, 440, 300);
context.stroke();

context.beginPath();
context.moveTo (270, 150);
context.lineTo (530, 150);
context.lineWidth= 15;
context.lineCap= 'butt';
context.strokeStyle= 'tan';
context.stroke();

context.beginPath();
context.rect (300, 70, 200, 70);
context.fillStyle= 'tan';
context.fill();
context.stroke();






















};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)