<script>
/*
* Created by Bayer und Preuss
* User: patricktresp
* Date: 26.06.12
*/
var _diamondWidth = 10;
var _diamondHeight = 15;
var float_ts = 0;
function draw() {
float_ts = new Date().getTime();
var sourceCanvas = document.getElementById("sourceCanvas");
if (sourceCanvas.getContext) {
var image = new Image();
image.src = "shore.jpg";
// caution : image.onload is lowercase not onLoad!
image.onload = function() {
var context = sourceCanvas.getContext('2d');
context.drawImage(image, 0, 0);
drawDiamonds();
}
}
}
function drawDiamonds() {
var canvas = document.getElementById('imageCanvas');
// make sure context is available
if (canvas.getContext) {
var context = canvas.getContext('2d');
var columns = canvas.width / _diamondWidth;
var rows = canvas.height / _diamondHeight;
for (var j = 0; j <= rows; j++) {
for (var i = 0; i <= columns; i++) {
// draw topTriangles when in row 0
if (j == 0) drawTopTriangle(canvas, i, j);
// draw sideTriangles when in column 0
if (i == 0) drawSideTriangle(canvas, i, j);
// firstRow
drawDiamond(canvas, i, j);
// secondRow displaced
drawDiamond(canvas, i + 0.5, j + 0.5);
}
}
// add extra brand stuff
drawBayerUndPreussDiamonds(canvas);
}
}
function drawDiamond(canvas, i, j) {
var context = canvas.getContext('2d');
var topX = _diamondWidth / 2 + i * _diamondWidth;
var rightX = _diamondWidth + i * _diamondWidth;
var bottomX = topX;
var leftX = i * _diamondWidth;
var topY = 0 + j * _diamondHeight;
var rightY = topY + _diamondHeight / 2;
var bottomY = topY + _diamondHeight;
var leftY = rightY;
var color = getBitmapColorForRect(canvas, i * _diamondWidth, j * _diamondHeight, _diamondWidth, _diamondHeight);
context.fillStyle = color;
context.shadowOffsetX = -2;
context.shadowOffsetY = -2;
context.shadowBlur = 8;
context.shadowColor = "rgb(91,91,91)";
context.beginPath();
context.moveTo(topX, topY);
context.lineTo(rightX, rightY);
context.lineTo(bottomX, bottomY);
context.lineTo(leftX, leftY);
context.lineTo(topX, topY);
context.fill();
}
function drawTopTriangle(canvas, i, j) {
var canvas = document.getElementById('imageCanvas');
var context = canvas.getContext('2d');
var leftX = i * _diamondWidth + _diamondWidth / 2;
var rightX = leftX + _diamondWidth;
var bottomX = leftX + _diamondWidth / 2;
var leftY = j;
var rightY = leftY;
var bottomY = j + _diamondHeight / 2;
var color = getBitmapColorForRect(canvas, i * _diamondWidth, (j + 1) * _diamondHeight, _diamondWidth / 2, _diamondHeight / 2);
context.fillStyle = color;
context.beginPath();
context.moveTo(leftX, leftY);
context.lineTo(rightX, rightY);
context.lineTo(bottomX, bottomY);
context.lineTo(leftX, leftY);
context.fill();
}
function drawSideTriangle(canvas, i, j) {
var context = canvas.getContext('2d');
var leftX = i;
var rightX = leftX + _diamondWidth / 2;
var bottomX = leftX;
var leftY = j * _diamondHeight - _diamondHeight / 2;
var rightY = leftY + _diamondHeight / 2;
var bottomY = leftY + _diamondHeight;
var color = getBitmapColorForRect(canvas, i * _diamondWidth, j * _diamondHeight, _diamondWidth / 2, _diamondHeight / 2);
context.fillStyle = color;
context.beginPath();
context.moveTo(leftX, leftY);
context.lineTo(rightX, rightY);
context.lineTo(bottomX, bottomY);
context.lineTo(leftX, leftY);
context.fill();
}
function getBitmapColorForRect(canvas, x, y, width, height) {
var sourceCanvas = document.getElementById("sourceCanvas");
if (sourceCanvas.getContext) {
var context = sourceCanvas.getContext('2d');
if (context) {
var imageData = context.getImageData(x, y, width, height);
return 'rgb(' + imageData.data[0] + ', ' + imageData.data[1] + ', ' + imageData.data[2] + ')';
}
}
return 0;
}
function drawBayerUndPreussDiamonds(canvas) {
var color = 'rgb(255,243,123)';
var w = _diamondWidth;
var h = _diamondHeight;
// single
var startX = 92 * w - w / 2;
var startY = 4 * h;
drawFirstBayerUndPreussDiamond(canvas, startX, startY);
drawThreeBayerUndPreussDiamonds(canvas, startX, startY);
drawFiveBayerUndPreussDiamonds(canvas, startX, startY);
}
function drawFirstBayerUndPreussDiamond(canvas, startX, startY) {
var color = 'rgb(255,243,123)';
var w = _diamondWidth * 2;
var h = _diamondHeight * 2;
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = color;
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(startX + w / 2, startY + h / 2);
context.lineTo(startX, startY + h);
context.lineTo(startX - w / 2, startY + h / 2);
context.lineTo(startX, startY);
context.fill();
}
}
function drawThreeBayerUndPreussDiamonds(canvas, startX, startY) {
var color = 'rgb(255,243,123)';
var w = _diamondWidth * 2;
var h = _diamondHeight * 2;
startX += 1.5 * _diamondWidth;
startY -= 1.5 * _diamondHeight;
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = color;
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(startX + w * 1.25, startY + h * 1.25);
context.lineTo(startX, startY + 2.5 * h);
context.lineTo(startX - 0.5 * w, startY + 2 * h);
context.lineTo(startX + 0.25 * w, startY + 1.25 * h);
context.lineTo(startX - w / 2, startY + h / 2);
context.lineTo(startX, startY);
context.fill();
}
}
function drawFiveBayerUndPreussDiamonds(canvas, startX, startY) {
var color = 'rgb(255,243,123)';
var w = _diamondWidth * 2;
var h = _diamondHeight * 2;
startX += 3 * _diamondWidth;
startY -= 3 * _diamondHeight;
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = color;
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(startX + w * 2, startY + h * 2);
context.lineTo(startX , startY + 4 * h);
context.lineTo(startX - .5*w , startY + 3.5 * h);
context.lineTo(startX + 1*w , startY + 2 * h);
context.lineTo(startX - w / 2, startY + h / 2);
context.lineTo(startX, startY);
context.fill();
}
}
</script> |
1023_1 – PhidgetRFID
