A1 Coding Project
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var Ax = 175;
var Ay = 150;
var Bx = 175;
var By = 350;
var control1x =25;
var control1y = 50;
var control2x = 50;
var control2y = 255;
var control3x = 275;
var control3y = 255;
var control4x = 325;
var control4y = 50;
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 10;
// line color
context.strokeStyle = 'rgb(255, 100, 100)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
var Ax = 585;
var Ay = 150;
var Bx = 585;
var By = 350;
var control1x = 435;
var control1y = 50;
var control2x = 460;
var control2y = 255;
var control3x = 685;
var control3y = 255;
var control4x = 735;
var control4y = 50;
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 10;
// line color
context.strokeStyle = 'rgb(255, 100, 100)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
//Background
var x = 25;
var y = 75;
var width = "700";
var height = "500";
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = 'rgba(255,127,158,0.56)';
context.fill();
context.lineWidth = 20;
context.strokeStyle = 'rgba(180,0,41,1.00)';
context.stroke();
ctx = canvas.getContext("2d")
ctx.lineWidth = 10;
ctx.strokeStyle = "#FF0031";
ctx.beginPath();
ctx.moveTo(585, 425);
ctx.quadraticCurveTo(375, 685, 175, 425);
ctx.stroke();
var context = canvas.getContext('2d');
// Reset the current path
context.beginPath();
// Staring point (10,45)
context.moveTo(175,425);
// End point (180,47)
context.lineTo(585,425);
// Make the line visible
context.stroke();
var context = canvas.getContext('2d');
// Reset the current path
context.beginPath();
// Staring point (10,45)
context.moveTo(100,100);
// End point (180,47)
context.lineTo(300,150);
// Make the line visible
context.stroke();
ctx.lineWidth = 30;
ctx.strokeStyle = "#FF0031";
//define the colour of the square
ctx.strokeStyle = "#FFEDF1";
ctx.fillStyle = "#FFFFFF";
// Draw a square using the fillRect() method and fill it with the colour specified by the fillStyle attribute
ctx.fillRect(255,430,100,70);
ctx.fillRect(400,430,100,70);
var context = canvas.getContext("2d");
// the triangle
context.beginPath();
context.moveTo(400, 400);
context.lineTo(275, 400);
context.lineTo(400, 270);
context.stroke()
context.closePath();
context.lineWidth = 10;
context.strokeStyle = '#FF8284';
context.stroke();
context.fillStyle = "#FF0058";
context.fill();
//Line
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var Ax = 175;
var Ay = 150;
var Bx = 175;
var By = 350;
var control1x =25;
var control1y = 50;
var control2x = 50;
var control2y = 255;
var control3x = 275;
var control3y = 255;
var control4x = 325;
var control4y = 50;
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 10;
// line color
context.strokeStyle = 'rgb(255, 100, 100)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
var Ax = 585;
var Ay = 150;
var Bx = 585;
var By = 350;
var control1x = 435;
var control1y = 50;
var control2x = 460;
var control2y = 255;
var control3x = 685;
var control3y = 255;
var control4x = 735;
var control4y = 50;
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 10;
// line color
context.strokeStyle = 'rgb(255, 100, 100)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
//Background
var x = 25;
var y = 75;
var width = "700";
var height = "500";
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = 'rgba(255,127,158,0.56)';
context.fill();
context.lineWidth = 20;
context.strokeStyle = 'rgba(180,0,41,1.00)';
context.stroke();
ctx = canvas.getContext("2d")
ctx.lineWidth = 10;
ctx.strokeStyle = "#FF0031";
ctx.beginPath();
ctx.moveTo(585, 425);
ctx.quadraticCurveTo(375, 685, 175, 425);
ctx.stroke();
var context = canvas.getContext('2d');
// Reset the current path
context.beginPath();
// Staring point (10,45)
context.moveTo(175,425);
// End point (180,47)
context.lineTo(585,425);
// Make the line visible
context.stroke();
var context = canvas.getContext('2d');
// Reset the current path
context.beginPath();
// Staring point (10,45)
context.moveTo(100,100);
// End point (180,47)
context.lineTo(300,150);
// Make the line visible
context.stroke();
ctx.lineWidth = 30;
ctx.strokeStyle = "#FF0031";
//define the colour of the square
ctx.strokeStyle = "#FFEDF1";
ctx.fillStyle = "#FFFFFF";
// Draw a square using the fillRect() method and fill it with the colour specified by the fillStyle attribute
ctx.fillRect(255,430,100,70);
ctx.fillRect(400,430,100,70);
var context = canvas.getContext("2d");
// the triangle
context.beginPath();
context.moveTo(400, 400);
context.lineTo(275, 400);
context.lineTo(400, 270);
context.stroke()
context.closePath();
context.lineWidth = 10;
context.strokeStyle = '#FF8284';
context.stroke();
context.fillStyle = "#FF0058";
context.fill();
//Line
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment