permisi gan, mau numpang nanya, kemaren saya dapet source code lumayan menarik, nah ane ngeliat, tertarik cuman ane dapet masalah,
ane ga ngerti ada : this.<namanya>.src="bla.jpg"
ane mau ubah bukan ngambil jadi gambar, tapi gambar di sourcenya....
berikut sourcenya :
Quote:
var imageRepository = new function() {
// Define images
this.background = new Image();
this.spaceship = new Image();
this.bullet = new Image();
this.enemy = new Image();
this.enemyBullet = new Image();
var numImages = 5;
var numLoaded = 0;
function imageLoaded() {
numLoaded++;
if (numLoaded === numImages) {
window.init();
}
}
this.background.onload = function() {
imageLoaded();
}
this.spaceship.onload = function() {
imageLoaded();
}
this.bullet.onload = function() {
imageLoaded();
}
this.enemy.onload = function() {
imageLoaded();
}
this.enemyBullet.onload = function() {
imageLoaded();
}
// nah masalahnya disini!
this.background.src = "imgs/bg.png";
this.spaceship.src = "imgs/ship.png";
this.bullet.src = "imgs/bullet.png";
this.enemy.src = "imgs/enemy.png";
this.enemyBullet.src = "imgs/bullet_enemy.png";
}
pinginnya gambarnya buatan sendiri jadi di coding dari sini langsung kaya gini :
Quote:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
[removed]
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.closePath();
ctx.lineWidth = 5;
ctx.fillStyle = '00CC66';
ctx.fill();
ctx.strokeStyle = 'green';
ctx.stroke();
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(70, 50, 5, 0, 2 * Math.PI);
ctx.closePath();
ctx.lineWidth = 5;
ctx.fillStyle = '#CC9933';
ctx.fill();
ctx.strokeStyle = '#CCFF33';
ctx.stroke();
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(120, 50, 5, 0, 2 * Math.PI);
ctx.closePath();
ctx.lineWidth = 5;
ctx.fillStyle = '#CC9933';
ctx.fill();
ctx.strokeStyle = '#CCFF33';
ctx.stroke();
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 25, 5, 0, 2 * Math.PI);
ctx.stroke();
ctx.arc(95, 50, 20, 0, 2 * Math.PI);
ctx.closePath();
ctx.lineWidth = 5;
ctx.fillStyle = '#CC9933';
ctx.fill();
ctx.strokeStyle = '#CCFF33';
ctx.stroke();
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 75, 5, 0, 2 * Math.PI);
ctx.stroke();
ctx.arc(95, 50, 20, 0, 2 * Math.PI);
ctx.closePath();
ctx.lineWidth = 5;
ctx.fillStyle = '#CC9933';
ctx.fill();
ctx.strokeStyle = '#CCFF33';
ctx.stroke();
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 20, 0, 2 * Math.PI);
ctx.closePath();
ctx.lineWidth = 5;
ctx.fillStyle = '#CC9933';
ctx.fill();
ctx.strokeStyle = '#CCFF33';
ctx.stroke();
// buatan ane
[removed]
</body>
</html>
ada yang bisa bantu ga? thanks gan!
