Assignment 02
canvas_assign_02A.html
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line
context.beginPath();
context.moveTo(0, 0);
context.lineTo(800, 600);
context.strokeStyle = 'rgb(0, 255, 0)';
context.lineWidth = 5;
context.stroke();
////////////////////////////////////// end above this line
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
canvas_assign_02B.html
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line
context.beginPath();
context.moveTo(0, 0);
context.lineTo(400, 600);
context.lineTo(800, 0);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 255, 0)';
context.stroke();
////////////////////////////////////// end above this line
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
canvas_assign_02C.html
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line
var x1 = 400;
var y1 = 550;
context.beginPath();
context.moveTo(50, 50);
context.lineTo(x1, y1);
context.lineTo(750, 50);
context.lineWidth = 30;
context.strokeStyle = '#6633cc';
context.lineCap = "round";
context.stroke();
////////////////////////////////////// end above this line
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
canvas_assign_02D.html
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line
context.beginPath();
context.moveTo(75, 50);
context.lineTo(400, 550);
context.lineTo(725, 50);
context.lineTo(75, 50);
context.lineWidth = 5;
context.strokeStyle = 'rgb(225, 102, 51)';
context.fillStyle = 'rgb(255, 255, 50)';
context.fill();
context.stroke();
////////////////////////////////////// end above this line
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
canvas_assign_02E.html
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(50, 50, 400, 400);
context.fillStyle = '#EA7317';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#6883BA';
context.stroke()
context.beginPath();
context.rect(350, 150, 400, 400);
context.fillStyle = '#F71735';
context.fill();
context.lineWidth = 10;
context.strokeStyle = '#A6D49F';
context.stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
canvas_assign_02F.html
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(50, 50, 600, 400);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 228, 94)';
// add linear gradient
grd = context.createLinearGradient(50, 50, 600, 400);
// red
grd.addColorStop(0, "#ff3300");
// blue
grd.addColorStop(1, "#6600ff");
// specify gradient fill
context.fillStyle = grd;
context.fill();
context.stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
canvas_assign_02G.html
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(100, 100, 600, 400);
context.lineWidth = 10;
context.strokeStyle = 'rgb(155, 197, 61)';
// add linear gradient
grd = context.createLinearGradient(100, 100, 600, 400);
// red
grd.addColorStop(0, "#ff3300");
// red2
grd.addColorStop(0.5, "#C3423F");
// blue
grd.addColorStop(1, "#6600ff");
// specify gradient fill
context.fillStyle = grd;
context.fill();
context.stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
canvas_assign_02H.html
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(0, 0, 800, 600);
// add linear gradient
grd = context.createLinearGradient(0, 0, 800, 600);
// dark blue
grd.addColorStop(1, "#0000CC");
// light blue
grd.addColorStop(0, "rgb(27, 161, 226)");
context.fillStyle = grd;
context.fill();
context.stroke()
context.beginPath();
var x = 100;
var y = 100;
var x1 = 700;
var y1 = 100;
var x2 = 400;
var y2 = 500;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x, y)
context.fillStyle = "#ffff00";
context.fill();
context.strokeStyle = "ffff33";
context.lineWidth = 1;
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment