camera.html | |
File Size: | 4 kb |
File Type: | html |
Codigo
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){
//Camara cuerpo
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = 'rgba(0, 0, 255, .5)';
context.fillRect(25, 25, 640, 480);
var topLeftCornerX = 188;
var topLeftCornerY = 50;
var width = 450;
var height = 320;
context.beginPath();
context.rect(topLeftCornerX, topLeftCornerY, width, height);
context.fillStyle = 'rgb(50,120,255)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.shadowBlur = 20;
context.shadowOffsetX = 6;
context.shadowOffsetY = 6;
context.stroke();
//circulos que simulan el lente
context.globalAlpha = 0.6; // set global alpha
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 1.6;
var centerY = canvas.height / 2.3;
var radius = 105;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(0,200,255)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.globalAlpha = 0.65; // set global alpha
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 1.6;
var centerY = canvas.height / 2.3;
var radius = 90;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(10,10,10)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 1.6;
var centerY = canvas.height / 2.3;
var radius = 50;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(60,60,60)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
context.globalAlpha = 0.5; // set global alpha
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 1.6;
var centerY = canvas.height / 2.3;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(80,80,60)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var topLeftCornerX = 490;
var topLeftCornerY = 50;
var width = 100;
var height = 50;
context.beginPath();
context.rect(topLeftCornerX, topLeftCornerY, width, height);
context.fillStyle = 'rgb(220,220,220)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var topLeftCornerX = 200;
var topLeftCornerY = 10;
var width = 100;
var height = 50;
context.beginPath();
context.rect(topLeftCornerX, topLeftCornerY, width, height);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2.8;
var centerY = canvas.height / 5.7;
var radius = 12;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(220,220,220)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="640" height="480"> </canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function(){
//Camara cuerpo
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = 'rgba(0, 0, 255, .5)';
context.fillRect(25, 25, 640, 480);
var topLeftCornerX = 188;
var topLeftCornerY = 50;
var width = 450;
var height = 320;
context.beginPath();
context.rect(topLeftCornerX, topLeftCornerY, width, height);
context.fillStyle = 'rgb(50,120,255)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.shadowBlur = 20;
context.shadowOffsetX = 6;
context.shadowOffsetY = 6;
context.stroke();
//circulos que simulan el lente
context.globalAlpha = 0.6; // set global alpha
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 1.6;
var centerY = canvas.height / 2.3;
var radius = 105;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(0,200,255)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.globalAlpha = 0.65; // set global alpha
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 1.6;
var centerY = canvas.height / 2.3;
var radius = 90;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(10,10,10)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 1.6;
var centerY = canvas.height / 2.3;
var radius = 50;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(60,60,60)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
context.globalAlpha = 0.5; // set global alpha
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 1.6;
var centerY = canvas.height / 2.3;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(80,80,60)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var topLeftCornerX = 490;
var topLeftCornerY = 50;
var width = 100;
var height = 50;
context.beginPath();
context.rect(topLeftCornerX, topLeftCornerY, width, height);
context.fillStyle = 'rgb(220,220,220)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var topLeftCornerX = 200;
var topLeftCornerY = 10;
var width = 100;
var height = 50;
context.beginPath();
context.rect(topLeftCornerX, topLeftCornerY, width, height);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2.8;
var centerY = canvas.height / 5.7;
var radius = 12;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(220,220,220)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="640" height="480"> </canvas>
</body>
</html>