Hallo allen,
Wie kan me hier mee helpen, dit script werkt wel in firefox maar niet in IE of Safari.
Ik weet niet wat er fout gaat en debuggen snap ik ook geheel niet.
Alvast dank voor enig advies
Wie kan me hier mee helpen, dit script werkt wel in firefox maar niet in IE of Safari.
Ik weet niet wat er fout gaat en debuggen snap ik ook geheel niet.
Alvast dank voor enig advies
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<script type="text/javascript">
// calculate screen size
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}
//split screen size in half to start drawing in center
var halfH = winH /2;
var halfW = winW /5;
// dims is for canvas size
// crd is for start point
var dims = [ winW , winH ];
var crd = [ halfW, halfH ];
// popup with data of dims and crd
//alert('dims: ' + dims[0] + 'x' + dims[1] + '\n'
// + 'crd: ' + crd[0] + ', ' + crd[1]);
var loopCount = 100;
var lineLength = [5, 5];
var angleRand = [-5, 5];
var angle = 0;
var frameSkip = 4;
var lineColor = '#000000';
var bgColor = '#FFFFFF';
var lineColorList = 1;
var colorSelect = 0;
var colorSelectPos = 0;
var timeStart;
var lineWidth = 1;
var linesDrawn = 0;
// ----------------------------------------------
var DEG_TO_RAD = Math.PI / 180;
function init()
{
var data = document.forms.lineForm;
crd[0] = halfW
crd[1] = halfH
angle = 0
lineLength[0] = 10
lineLength[1] = 90
angleRand[0] = 180
angleRand[1] = -180
loopCount = 100
frameSkip = 4
//alert(crd.toString());
// handle colors
clean_color();
lineColorList = '#000000';
linesDrawn = 0;
location.hash = '#imgZone';
c = document.getElementById('lineArea').getContext('2d');
c.strokeStyle = "#000000";
c.lineWidth = 1;
c.fillStyle = "#FFFFFF";
c.fillRect(0, 0, dims[0], dims[1]);
timeStart = (new Date()).getTime();
paint();
bgColor = '#FFFFFF';
lineColor = '#000000';
lineWidth = 1
}
function halt()
{
loopCount = 0;
document.forms.lineForm.stopper.style.display = 'none';
document.forms.lineForm.starter.style.display = 'inline';
}
function rand(start, end)
{
return Math.floor(start + Math.random() * (end+1 - start));
}
function linePiece(cx, orig_x, orig_y, angle, length)
{
//alert(arguments.toString());
cx.beginPath();
cx.moveTo(orig_x, orig_y);
x2 = orig_x + Math.round(Math.cos(angle * DEG_TO_RAD) * length);
y2 = orig_y + Math.round(Math.sin(angle * DEG_TO_RAD) * length);
cx.lineTo(x2, y2);
cx.stroke();
return [x2, y2];
}
function paint()
{
length = rand(lineLength[0], lineLength[1]);
crd = linePiece(c, crd[0], crd[1], angle, length);
linesDrawn++;
// if anything's out of bounds, do some wrapping work.
if (crd[0] < 0 || crd[0] > (dims[0] - 1) || crd[1] < 0 || crd[1] > (dims[1] - 1)) {
if (crd[0] < 0) { // x out to the left
crd[0] += dims[0];
}
else if (crd[0] > (dims[0] - 1)) { // x out to the right
crd[0] -= dims[0];
}
if (crd[1] < 0) { // y out to the top
crd[1] += dims[1];
}
else if (crd[1] > (dims[1] - 1)) { // y out to the bottom
crd[1] -= dims[1];
}
// reverse angle to point line back to edge on wrap
linePiece(c, crd[0], crd[1], angle - 180, length);
}
angle += rand(angleRand[0], angleRand[1]);
c.strokeStyle = choose_line_color();
document.getElementById('coordTracker')
if (--loopCount > 0) {
setTimeout(paint, frameSkip);
}
if (!(loopCount % 10)) {
document.getElementById('timeSpent')
}
}
function choose_line_color()
{
var len = lineColorList.length;
if (len > 1) {
if (colorSelect == 0) {
return lineColorList[ rand(0, len - 1) ]
}
else {
var pos = colorSelectPos;
if (++colorSelectPos >= len) {
colorSelectPos = 0;
}
return lineColorList[pos];
}
}
else {
return lineColorList[0];
}
}
function saveimage()
{
}
function clean_color()
{
}
</script>
<style type="text/css">
canvas {
border: 0px solid black;
clear:both;
z-index: -100;
position: fixed;
overflow: hidden;
top: 0px;
left: 0px;
}
body {
margin: 0px;
padding:0px;
}
</style>
</head>
<body onLoad="init()">
<div id="draw">
<canvas id="lineArea" width="3000" height="1500"></canvas>
</div>
</body>
Laatst bewerkt door een moderator:
; als oplossing kan je excanvas gebruiken.
