Third week of classes. The confusing numbers and codes are now starting to make some sense to me. Learning something new and interesting everyday and class seems to be quite exciting to go to.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 450;
var y = 150;
var controlX1 = 350;
var controlY1 = 15;
var controlX2 = 155;
var controlY2 = 160;
var endX = 350;
var endY = 325;
//Quadratic Curve Variables
var controlX3 = 425;
var controlY3 = 385;
var endX3 = 450;
var endY3 = 480;
var controlX4 = 475;
var controlY4 = 375;
var endX4 = 550;
var endY4 = 325;
//Bezier curve
var controlX5 = 755;
var controlY5 = 180;
var controlX6 = 550;
var controlY6 = 15;
var endX5 = x;
var endY5 = y;
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'rgb(100,100,200)';
var grd = context.createLinearGradient(0, 0, 800, 600);
grd.addColorStop(0, 'rgb(0,100,200)');
grd.addColorStop(1, 'rgb(255,255,255)');
context.fillStyle = grd;
context.lineWidth = 8;
context.fill();
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX5, endY5);
context.closePath();
context.lineWidth = 8;
context.fillStyle ='rgb(255,10,10)';
context.fill();
context.strokeStyle ='rgb(150,0,0)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment