Ik probeer een kaart spel te maken met een canvas. het is me gelukt om plaatjes, van een kaart, op de canvas te zetten. Ook kan ik een kaart rand om de kaart maken op het moment dat ik over een kaart beweeg met de muis. helaas gaat het geheel flikkeren als ik te snel beweeg (en dat is al bij 3 kaarten) dus ben ik op zoek gegaan naar eer manier om te voor komen dat ik alle plaatjes steeds op nieuw moet tekenen. op google zag ik dat mensen een extra canvas gebruikte als buffer dus dat wil ik ook doen. helaas gaat het niet geheel goed.
De lijnen die ik teken kan ik wel zien op de buffer canvas (normaal zou die buffer canvas niet zicht baar zijn maar ik gebruik voor de test wel een zichtbaar canvas) maar de plaatjes die worden niet over genomen naar de buffer canvas.
(hier onder mijn test case pagina.)
Ik teken op het eerste canvas 2 lijnen zodat ik kan zien dat ik iets overneem op het buffer canvas.
op het buffer canvas teken ik 1 schuine lijn zodat ik zie dat er iets op de buffer canvas komt te staan
Het enige dat ik op google kon vinden is dat plaatjes op de zelfde server moeten staan als waar het javascript vandaan komt maar aan die eis voldoe ik.
weet hier iemand waarom mijn plaatjes niet worden overgenomen op het buffer canvas?
De lijnen die ik teken kan ik wel zien op de buffer canvas (normaal zou die buffer canvas niet zicht baar zijn maar ik gebruik voor de test wel een zichtbaar canvas) maar de plaatjes die worden niet over genomen naar de buffer canvas.
(hier onder mijn test case pagina.)
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="JavaScript"> function main(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext('2d'); // lijn onder image tekenen context.beginPath(); context.moveTo(0, 100); context.lineTo(500, 100); context.stroke(); var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 50, 50); }; imageObj.src = "cardback.png"; //lijn boven op image tekenen context.beginPath(); context.moveTo(0, 200); context.lineTo(500, 200); context.stroke(); //image data verzamelen var oldBack = new Image(); oldBack = context.getImageData(10, 10, 400, 400); var BufferCanvas = document.getElementById("BufferCanvas"); var Buffercontext = BufferCanvas.getContext('2d'); // schuine lijn tekenen Buffercontext.beginPath(); Buffercontext.moveTo(0, 0); Buffercontext.lineTo(500, 500); Buffercontext.stroke(); // verzamelde image data op nieuwe canvas plaatsen Buffercontext.putImageData(oldBack, 50, 50); } </script> </head> <body onload="main()"> <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"> </canvas> <canvas id="BufferCanvas" width="500" height="500" style="border:1px solid #000000;"> </canvas> </body> </html> |
Ik teken op het eerste canvas 2 lijnen zodat ik kan zien dat ik iets overneem op het buffer canvas.
op het buffer canvas teken ik 1 schuine lijn zodat ik zie dat er iets op de buffer canvas komt te staan
Het enige dat ik op google kon vinden is dat plaatjes op de zelfde server moeten staan als waar het javascript vandaan komt maar aan die eis voldoe ik.
weet hier iemand waarom mijn plaatjes niet worden overgenomen op het buffer canvas?