004_comission/_resources
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update,

Browse Source
This commit is contained in:
louiscklaw
2025-02-01 01:58:47 +08:00
parent b3da7aaef5
commit 04dbefcbaf
1259 changed files with 280657 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
it114105/itp4513/Lab10/Lab10_1.html Normal file
View File

@@ -0,0 +1,35 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lab 10 Task 1</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
drawGridLines(ctx);
}
function drawGridLines(ctx) {
var w = ctx.canvas.width;
var h = ctx.canvas.height;
var dist = 10;
ctx.beginPath();
for(var i=0.5; i<w; i+=dist) {
ctx.moveTo(i, 0);
ctx.lineTo(i, h);
}
for(var i=0.5; i<h; i+=dist) {
ctx.moveTo(0, i);
ctx.lineTo(w, i);
}
ctx.strokeStyle = "blue";
ctx.stroke();
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="301" height="301"></canvas>
</body>
</html>

26
it114105/itp4513/Lab10/Lab10_2a.html Normal file
View File

@@ -0,0 +1,26 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lab10 Task 2a</title>
</head>
<script>
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(55,55);
ctx.lineTo(5,5);
ctx.lineTo(5,105);
ctx.lineTo(55,55);
ctx.arc(155,55, 50, 0, 360);
ctx.strokeStyle = 'black';
ctx.stroke();
}
</script>
<body onLoad="draw()">
<canvas id="canvas" width="300" height="300">
</canvas>
</body>
</html>

27
it114105/itp4513/Lab10/Lab10_2b.html Normal file
View File

@@ -0,0 +1,27 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lab10 Task 2b</title>
</head>
<script>
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(55,55);
ctx.lineTo(5,5);
ctx.lineTo(5,105);
ctx.lineTo(55,55);
ctx.moveTo(205,55);
ctx.arc(155,55, 50, 0, 360);
ctx.strokeStyle = 'black';
ctx.stroke();
}
</script>
<body onLoad="draw()">
<canvas id="canvas" width="300" height="300">
</canvas>
</body>
</html>

38
it114105/itp4513/Lab10/Lab10_2c.html Normal file
View File

@@ -0,0 +1,38 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lab 10 Task 2c</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
drawPaths(ctx);
}
function drawPaths(ctx) {
ctx.beginPath();
ctx.moveTo(55, 55);
ctx.lineTo(5, 5);
ctx.lineTo(5, 105);
ctx.closePath();
showPath(ctx, "pink", "red");
ctx.beginPath();
ctx.arc(155, 55, 50, 0, 2 * Math.PI);
showPath(ctx, "lightblue", "blue");
}
function showPath(ctx, fill, stroke) {
ctx.fillStyle = fill;
ctx.strokeStyle = stroke;
ctx.fill();
ctx.stroke();
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="301" height="301"></canvas>
</body>
</html>

37
it114105/itp4513/Lab10/Lab10_3.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas - Draw Rectangle</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var length = 200; // side length of the square
var num = 8; //number of squares
var offset = length / 2 / num;
for (var i = 0; i < num; i++) {
ctx.fillStyle = (i%2==0)? "black" : "white";
var x = 10 + offset * i;
var y = 10 + offset * i;
ctx.fillRect(x, y, length, length);
length -= offset * 2;
var logStr = "x = " + x;
logStr += ", y = " + y;
logStr += ", length = " + length;
console.log(logStr);
}
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="300" height="300" />
</body>
</html>

47
it114105/itp4513/Lab10/Lab10_4.html Normal file
View File

@@ -0,0 +1,47 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lab10 Task 4</title>
</head>
<script>
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
var val = document.getElementById('name').value;
var fontSize = document.getElementById('size').value;
ctx.font = fontSize+"px " +"Bodoni MT black";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.shadowBlur = 8;
ctx.shadowColor = 'Black';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.strokeText(val, canvas.width/2,100);
//2nd
ctx.font= fontSize*(1.5)+"px " +"Bodoni MT black";
ctx.textAlign = "left";
ctx.shadowBlur = 0;
ctx.shadowColor = 'white';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
var grad = ctx.createLinearGradient(90, 0, 300, 0);
grad.addColorStop(0, "yellow");
grad.addColorStop(1, "green");
ctx.fillStyle = grad;
var fontWidth = ctx.measureText(val).width;
ctx.fillText(val, (canvas.width-fontWidth)/2,200);
}
</script>
<body onLoad="draw()">
<canvas id="canvas" width="500" height="300" style=" border: 1px solid black">
</canvas><br>
Food Name <input id="name" type="text" value="Cookie" onChange="draw()">
<br>Font Size (px) 20<input id="size" type="range" min="20" max="80" onChange="draw()"> 80
</body>
</html>