<html>
<head>
<title>Throwing die</title>
<script>
var canv_width = 400;
var canv_heigth = 300;
var dice_x = 50;
var dice_y = 50;
var dice_width = 100;
var dice_height = 100;
var dotrad = 6;
var ctx;
function init() {
var ch = Math.floor(Math.random()*6) + 1;
drawface(ch);
}
function drawface(n) {
ctx = document.getElementById("canvas").getContext('2d');
ctx.lineWidth = 5;
ctx.clearRect(dice_x, dice_y, dice_width, dice_height);
ctx.strokeRect(dice_x, dice_y, dice_width, dice_height);
ctx.fillStyle = "#009966";
switch(n) {
case 1: Draw1();
break;
case 2: Draw2();
break;
case 3: Draw3();
break;
case 4: Draw4();
break;
case 5: Draw5();
break;
case 6: Draw6();
break;
default:break;
}
}
function Draw1() {
var dot_x = dice_x + 0.5 * dice_width;
var dot_y = dice_y + 0.5 * dice_height;
ctx.beginPath();
ctx.arc(dot_x, dot_y, dotrad, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
function Draw2() {
var dot_x;
var dot_y;
dot_x = dice_x + 4*dotrad;
dot_y = dice_y + 4*dotrad;
ctx.arc(dot_x, dot_y, dotrad, 0, Math.PI * 2, true);
ctx.closePath();
dot_x = dice_x + dice_width - 4*dotrad;
dot_y = dice_y + dice_height - 4*dotrad;
ctx.arc(dot_x, dot_y, dotrad, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body onLoad="drawface(2);">
<canvas id="canvas" width="400", height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
</body>
</html>
<p id="p"></p>
document.getElementById("p");
x.innerHTML = "xxx";
x.style.color = "#ff0000";
<input id="i"></input>
document.getElementById("i");
x.value = "xxx";
<img id="im"></img>
document.getElementById("im");
x.src = "/xxx/xxx.jpg";