I started by making a graph with the image.
I used this as a reference image for the points, but somewhere along the way I messed up one point and it ruined the whole thing, so it is not true to the reference image anymore.
Also, I stopped using variables for each point and just used the numbers since it was easier for me.
This is the final product (fun rainbow background included):
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
var grd = context.createRadialGradient(50, 50, 10, 300, 50, 300);
grd.addColorStop(0, 'rgba(220, 225, 220, 0.25)');
grd.addColorStop(1, 'rgba(200, 225, 60, 0.20)');
context.fillStyle = grd;
context.fill();
context.fillStyle = grd;
context.fill();
//rainbow1
context.beginPath();
context.moveTo(100, 100);
context.quadraticCurveTo(400, -50, 700, 100);
context.lineWidth = 22;
context.lineCap = 'round';
//color
context.strokeStyle = 'red';
context.stroke();
//2
context.beginPath();
context.moveTo(110, 120);
context.quadraticCurveTo(400, -30, 700, 120);
context.lineWidth = 22;
context.lineCap = 'round';
//color
context.strokeStyle = 'orange';
context.stroke();
//3
context.beginPath();
context.moveTo(120, 140);
context.quadraticCurveTo(400, -10, 700, 140);
context.lineWidth = 22;
context.lineCap = 'round';
//color
context.strokeStyle = 'yellow';
context.stroke();
//4
context.beginPath();
context.moveTo(130, 160);
context.quadraticCurveTo(400, 10, 700, 160);
context.lineWidth = 22;
context.lineCap = 'round';
//color
context.strokeStyle = 'green';
context.stroke();
//5
context.beginPath();
context.moveTo(140, 180);
context.quadraticCurveTo(400, 30, 700, 180);
context.lineWidth = 22;
context.lineCap = 'round';
//color
context.strokeStyle = 'blue';
context.stroke();
//6
context.beginPath();
context.moveTo(150, 200);
context.quadraticCurveTo(400, 50, 700, 200);
context.lineWidth = 22;
context.lineCap = 'round';
//color
context.strokeStyle = 'purple';
context.stroke();
//porygon tail
var x = 460;
var y = 230;
var x2 = 551;
var y2 = 25;
var x3 = 575;
var y3 = 26;
var x4 = 550;
var y4 = 254;
var x5 = 590;
var y5 = 47;
var x6 = 595;
var y6 = 325;
context.beginPath();
context.moveTo(x, y);
context.lineWidth = 1;
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.lineTo(x4, y4);
context.lineTo(x, y);
context.closePath();
context.fillStyle = 'rgb(90, 172, 200)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(x3, y3);
context.lineTo(x5, y5);
context.lineTo(x6, y6);
context.lineTo(x4, y4);
context.closePath();
context.fillStyle = 'rgb(80, 152, 180)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
var x7 = 420;
var y7 = 217;
//back leg
context.beginPath();
context.moveTo(230, 480);
context.lineTo(246, 485);
context.lineTo(302, 390);
context.lineTo(250, 300);
context.fillStyle = 'rgb(80, 152, 180)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(200, 352);
context.lineTo(170, 450);
context.lineTo(230, 480);
context.lineTo(300, 252);
context.lineTo(200, 352);
context.fillStyle = 'rgb(90, 172, 200)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
//body
///upper
context.beginPath();
context.moveTo(x7, y7);
context.lineTo(512, 230);
context.lineTo(570, 255);
context.lineTo(420, 452);
context.lineTo(430, 348);
context.lineTo(380, 275);
context.lineTo(x7, y7);
context.closePath();
context.fillStyle = '#FF7799';
context.fill();
context.moveTo(380, 275);
context.lineTo(512, 230);
context.strokeStyle = 'black';
context.stroke();
///front top
context.beginPath();
context.moveTo(380, 275);
context.lineTo(430, 348);
context.lineTo(420, 452);
context.lineTo(199, 415);
context.lineTo(240, 347);
context.lineTo(280, 340);
context.lineTo(380, 275);
context.closePath();
context.fillStyle = 'rgb(90, 172, 200)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(420, 452);
context.lineTo(380, 275);
context.strokeStyle = 'black';
context.stroke();
///lower
context.beginPath();
context.moveTo(420, 452);
context.lineTo(450, 520);
context.lineTo(600, 330);
context.lineTo(570, 255);
context.lineTo(420, 452);
context.closePath();
context.fillStyle = '#FF6688';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(450, 520);
context.lineTo(340, 500);
context.lineTo(199, 415);
context.lineTo(420, 452);
context.closePath();
context.fillStyle = 'rgb(80, 152, 180)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//head base pink
context.beginPath();
context.moveTo(x7, y7);
context.lineTo(438, 148);
context.lineTo(380, 75);
context.lineTo(290, 55);
context.lineTo(210, 125);
context.lineTo(150, 250);
context.lineTo(124, 352);
context.lineTo(178, 375);
context.lineTo(280, 340);
context.lineTo(420, 250);
context.lineTo(420, 217);
context.closePath();
context.fillStyle = '#FF7799'
context.fill();
context.strokeStyle = 'black';
context.stroke();
//head blu nose
context.beginPath();
context.moveTo(150, 250);
context.lineTo(124, 352);
context.lineTo(178, 375);
context.lineTo(240, 354);
context.lineTo(225, 320);
context.lineTo(210, 310);
context.lineTo(142, 280);
context.closePath();
context.fillStyle = 'rgb(90, 172, 200)'
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(178, 375);
context.lineTo(225, 320);
context.moveTo(178, 375);
context.lineTo(174, 368);
context.lineTo(210, 310);
context.moveTo(174, 368);
context.lineTo(124, 347);
context.closePath();
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(178, 375);
context.lineTo(240, 354);
context.lineTo(225, 320);
context.lineTo(178, 375);
context.closePath();
context.fillStyle = 'rgb(80, 152, 180)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(210, 310);
context.lineTo(380, 75);
context.strokeStyle = 'black';
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(225, 320);
context.lineTo(305, 225);
context.moveTo(370, 170);
context.lineTo(438, 148);
context.lineTo(420, 217);
context.lineTo(420, 217);
context.lineTo(x7, y7);
context.lineTo(420, 250);
context.lineTo(280, 340);
context.lineTo(239, 354);
context.lineTo(225, 320);
context.fillStyle = '#FF6688';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
///eye
context.beginPath();
context.moveTo(280, 212);
context.lineTo(278, 160);
context.lineTo(328, 147);
context.lineTo(370, 170);
context.lineTo(360, 220);
context.lineTo(305, 225);
context.lineTo(280, 212);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
context.beginPath();
context.rect(320, 180, 15, 15);
context.fillStyle = 'black';
context.fill();
//leg
///back
///shadow
context.beginPath();
context.moveTo(675, 347);
context.lineTo(675, 375);
context.lineTo(577, 580);
context.lineTo(480, 545);
context.lineTo(465, 525);
context.lineTo(600, 315);
context.fillStyle = 'rgb(80, 152, 180)'
context.fill();
context.closePath();
//lines back
context.beginPath();
context.moveTo(675, 347);
context.lineTo(675, 375);
context.lineTo(577, 580);
context.lineTo(560, 560);
context.lineTo(465, 525);
context.lineTo(480, 545);
context.lineTo(577, 580);
//context.fillStyle = 'rgb(80, 152, 180)'
//context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
///bottom front
context.beginPath();
context.moveTo(465, 525);
context.lineTo(502, 344);
context.lineTo(598, 400);
context.lineTo(560, 560);
context.lineTo(465, 525);
context.fillStyle = 'rgb(90, 172, 200)'
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
///top front
context.beginPath();
context.moveTo(502, 344);
context.lineTo(600, 315);
context.lineTo(675, 347);
context.lineTo(598, 400);
context.lineTo(502, 344);
context.fillStyle = 'rgb(90, 172, 200)'
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment