As of 1:53pm, I FINALLY was able to get something to show up with this assignment. I literally have been working on this since last night. Tried again this morning during the class time until now and my brainis fried. If THIS was suppose to be an easy assignment, then I need to take a valium to calm my nerves for next weeks project. My end result looks a little funky but the lines are connecting. We will call this piece "A Heart Attack".
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////////// start below this line ??????????
var controlX1=300;
var controlY1=0;
var controlX2=100;
var controlY2=200;
var endX=200;
var endY=320;
var controlY1=0;
var controlX2=100;
var controlY2=200;
var endX=200;
var endY=320;
var controlX3=380;
var controlY3=400;
var endX2=300;
var endY2=450;
var controlY3=400;
var endX2=300;
var endY2=450;
var controlX4=425;
var controlY4=300;
var endX3=500;
var endY3=325;
var controlY4=300;
var endX3=500;
var endY3=325;
var controlX5=600;
var controlY5=200;
var controlX6=550;
var controlY6=0;
var endX4=300;
var endY4=100;
var controlY5=200;
var controlX6=550;
var controlY6=0;
var endX4=300;
var endY4=100;
var grdstartX=300;
var grdstartY=0;
var grdendX=300;
var grdendY=500;
var grdstartY=0;
var grdendX=300;
var grdendY=500;
//Rectangle
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);
grd.addColorStop(0, 'rgb(255,0,255)');
grd.addColorStop(1, 'rgb(0,0,250)');
context.fillStyle= grd;
context.fill();
context.stroke();
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);
grd.addColorStop(0, 'rgb(255,0,255)');
grd.addColorStop(1, 'rgb(0,0,250)');
context.fillStyle= grd;
context.fill();
context.stroke();
//Heart
context.beginPath();
context.moveTo( 400,200 );
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX3, controlY3, endX2, endY2);
context.quadraticCurveTo(controlX4, controlY4, endX3, endY3);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX4, endY4);
context.fillStyle='rgb(255,0,250)';
context.fill();
context.lineWidth=5;
context.lineCap='round';
context.strokeStyle='rgb(255,255,255)'
context.stroke();
context.beginPath();
context.moveTo( 400,200 );
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX3, controlY3, endX2, endY2);
context.quadraticCurveTo(controlX4, controlY4, endX3, endY3);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX4, endY4);
context.fillStyle='rgb(255,0,250)';
context.fill();
context.lineWidth=5;
context.lineCap='round';
context.strokeStyle='rgb(255,255,255)'
context.stroke();
/////////// end above this line ?????????
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment