Assignment #2 | Basic HTLM
canvas_gra_01.html
Diagonal Line
<!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.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
canvas_gra_02.html
V Shape
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 0;
var y = 0;
var x1 = 400;
var y1 = 600;
var x2 = 800;
var y2 = 0;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
canvas_gra_03.html
Horizontal Line
<!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(50, 50);
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_gra_03.html
Round V Shape
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 50;
var y = 50;
var x1 = 400;
var y1 = 600;
var x2 = 750;
var y2 = 50;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
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_gra_04.html
Triangle
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 75;
var y = 50;
var x1 = 400;
var y1 = 550;
var x2 = 725;
var y2 = 50;
var x3 = 75;
var y3 = 50;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.lineWidth = 5;
context.fillStyle = 'rgb(255, 255, 50)';
context.fill();
context.strokeStyle = 'rgb(255, 102, 51)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
canvas_gra_05.html
Two Squares
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
///Square 1//
var x = 50;
var y = 50;
var width = 400;
var height = 400;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = '#FF6347';
context.fill();
context.lineWidth = 5;
context.strokeStyle = ' #00BFFF';
context.stroke()
///Square 2//
context.beginPath();
context.rect(350,150,400,400);
context.fillStyle = '#8B0000';
context.fill();
context.lineWidth = 10;
context.strokeStyle = ' #228B22';
context.stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
canvas_gra_06.html
Rectangle Gradient
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
///Square 1//
var x = 50;
var y = 50;
var width = 600;
var height = 400;
context.beginPath();
context.rect(x,y,width,height);
// add linear gradient
var grd = context.createLinearGradient(450, 700, 0, 0);
// START COLOR Orange
grd.addColorStop(0, "#ff3300");
// INTERMEDIATE COLOR 1 Green
grd.addColorStop(.3, "#00FF33");
// INTERMEDIATE COLOR 2 Blue
grd.addColorStop(.6, "#004dff");
// INTERMEDIATE COLOR 4
grd.addColorStop(.9, "#FF004D");
// ENDING COLOR Purple
grd.addColorStop(1, "#6600ff");
context.fillStyle = grd;
context.fill();
// add stroke
context.lineWidth = 10;
context.strokeStyle = '#FFFF00';
context.stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
great job
ReplyDelete