Untitled
unknown
plain_text
2 years ago
4.6 kB
4
Indexable
<!DOCTYPE html>
<html>
<head>
<title>Belajar Canvas 075</title>
</head>
<body>
<canvas id="GL_Canvas" width="800" height="1200" style="border:1px solid #000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("GL_Canvas");
var ctx = canvas.getContext("2d");
// ---------------------text---------------------
ctx.font = '40px Arial';
ctx.strokeText('Hello world', 20, 650);
ctx.fillText('Hello world', 20, 750);
ctx.strokeStyle = "orange";
ctx.moveTo(320, 620);
ctx.lineTo(320, 770);
ctx.stroke();
ctx.font = "15px Arial";
ctx.textAlign="start";
ctx.fillText("textAlign = start", 320, 660);
ctx.textAlign="end";
ctx.fillText("textAlign = end", 320, 680);
ctx.textAlign="left";
ctx.fillText("textAlign = left", 320, 700);
ctx.textAlign="center";
ctx.fillText("textAlign = center", 320, 720);
ctx.textAlign="right";
ctx.fillText("textAlign = right", 320, 740);
ctx.moveTo(5, 900);
ctx.lineTo(425, 900);
ctx.stroke();
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic", 80, 900);
ctx.textBaseline="top";
ctx.fillText("Top", 120, 900);
ctx.textBaseline="hanging";
ctx.fillText("Hanging", 200, 900);
ctx.textBaseline="middle";
ctx.fillText("Middle", 260, 900);
ctx.textBaseline="ideographic";
ctx.fillText("Ideographic", 360, 900);
ctx.textBaseline="bottom";
ctx.fillText("Bottom", 420, 900);
ctx.fillText('Halo!', 550, 650);
ctx.direction = 'rtl';
ctx.fillText('Halo!', 550, 730);
var kata = 'ABCD';
var objekTeks = ctx.measureText(kata);
ctx.fillText(kata, objekTeks.width, 1020);
var img = new Image();
img.src = "pathImage";
img.onload = function() {
ctx.drawImage(img, x, y + 600);
}
// --------------------gambar--------------------
var gambar = new Image();
gambar.src = "https://i.imgur.com/jAMkx3n.png";
gambar.onload = function() {
ctx.drawImage(gambar, 30, 30, 180, 180);
var imgDataA = ctx.getImageData(30, 30, 180, 180);
var pixelsA = imgDataA.data;
for (var i = 0; i < pixelsA.length; i += 4) {
let lightness = parseInt((pixelsA[i] + pixelsA[i + 1] + pixelsA[i + 2]) / 3);
pixelsA[i] = lightness;
pixelsA[i + 1] = lightness;
pixelsA[i + 2] = lightness;
}
ctx.putImageData(imgDataA, 30, 30);
ctx.drawImage(gambar, 74, 55, 72, 72, 30, 250, 80, 80);
ctx.drawImage(gambar, 460, 20, 100, 100);
var imgDataB = ctx.getImageData(460, 20, 100, 100);
var pixelsB = imgDataB.data;
for (var i = 0; i < pixelsB.length; i += 4) {
pixelsB[i] ^= 255
pixelsB[i + 1] ^= 255
pixelsB[i + 2] ^= 255
}
ctx.putImageData(imgDataB, 460, 20);
ctx.drawImage(gambar, 300, 20, 90, 90);
function applyBrightness(data, brightness) {
for (var i = 0; i < data.length; i = 4) {
data[i] += 255 * (brightness / 100)
data[i + 1] += 255 * (brightness / 100)
data[i + 2] += 255 * (brightness / 100)
}
}
ctx.drawImage(gambar, 280, 320, 120, 90);
var imgDataC = ctx.getImageData(280, 320, 120, 90);
applyBrightness(imgDataC.data, -50);
ctx.putImageData(imgDataC, 280, 320);
function truncateColor(value) {
if (value < 0) {
value = 0;
} else if (value > 255) {
value = 255;
}
return value;
}
function applyContrast(data, contrast) {
factor = (259.0 * (contrast + 255.0)) / (255.0 * (259.0 - contrast));
for (var i = 0; i < data.length; i = 4) {
data[i] = truncateColor(factor * (data[i] - 128.0) + 128.0);
data[i + 1] = truncateColor(factor * (data[i + 1] - 128.0) + 128.0);
data[i + 2] = truncateColor(factor * (data[i + 2] - 128.0) + 128.0);
}
}
ctx.drawImage(gambar, 490, 320, 90, 120);
var imgDataD = ctx.getImageData(490, 320, 90, 120);
applyContrast(imgDataD.data, 100);
ctx.putImageData(imgDataD, 490, 320);
}
</script>
</body>
</html>Editor is loading...