OpenLayers OpenLayers

Changeset 1336

Show
Ignore:
Timestamp:
08/22/06 23:53:41 (2 years ago)
Author:
crschmidt
Message:

More colorful example, demonstrating the ability of Canvas.js to store the
alpha and color + width inforamtion stored along with the lines now.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • sandbox/crschmidt/canvas/examples/canvas.html

    r1293 r1336  
    88        } 
    99    </style> 
     10    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhQtCjFYhdtNUZyqZQW2mFbq_dOIHBSGvjZ-C7_tXAXYdB-ehlOacmC_xA" type="text/javascript"></script> 
    1011    <script src="../lib/OpenLayers.js"></script> 
    1112    <script type="text/javascript"> 
    1213        <!-- 
    1314        var map, canvas; 
     15        var click; 
    1416        function init(){ 
    1517            map = new OpenLayers.Map('map'); 
    …… 
    1719            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",  
    1820                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});  
     21            var g = new OpenLayers.Layer.Google("Google");     
    1922            canvas = new OpenLayers.Layer.Canvas("Canvas Layer"); 
    20             map.addLayers([ol_wms, canvas]); 
     23            map.addLayers([ol_wms, g,canvas]); 
    2124            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    2225            // map.setCenter(new OpenLayers.LonLat(0, 0), 0); 
    2326            map.zoomToMaxExtent(); 
    2427            canvas.drawLine(new OpenLayers.LonLat(-71,42), new OpenLayers.LonLat(0,0)); 
     28            canvas.setStrokeColor("red"); 
     29            canvas.setStrokeWidth(5); 
     30            canvas.setAlpha(.5); 
     31            map.events.register("click", map, function(e) { 
     32              if (click) { 
     33                canvas.drawLine(click, this.getLonLatFromPixel(e.xy)); 
     34                click = null; 
     35                $('status').innerHTML = ""; 
     36              }  
     37              else {  
     38               click = this.getLonLatFromPixel(e.xy); 
     39               $('status').innerHTML = "Point 1 stored: "+click+". <a href='#' onclick='click=null;return false'>Reset</a>"; 
     40             } 
     41           }); 
    2542        } 
    2643        function drawIt() {  
    …… 
    4259    End Lat: <input type="text" id="lat2" /><br /> 
    4360    <input type="submit" value="Add line" onclick="drawIt()" /> 
     61    <div id="status"></div> 
     62    <center> 
     63<table border="1" cellpadding="0" cellspacing="1"> 
     64<tbody> 
     65<tr> 
     66<td bgcolor="#000000"> 
     67<font size="-3"> 
     68<a href="#" onclick="canvas.setStrokeColor('#000000');return false">&nbsp;&nbsp;&nbsp;</a> 
     69</font> 
     70</td> 
     71<td bgcolor="#000033"> 
     72<font size="-3"> 
     73<a href="#" onclick="canvas.setStrokeColor('#000033');return false">&nbsp;&nbsp;&nbsp;</a> 
     74</font> 
     75</td> 
     76<td bgcolor="#000066"> 
     77<font size="-3"> 
     78<a href="#" onclick="canvas.setStrokeColor('#000066');return false">&nbsp;&nbsp;&nbsp;</a> 
     79</font> 
     80</td> 
     81<td bgcolor="#000099"> 
     82<font size="-3"> 
     83<a href="#" onclick="canvas.setStrokeColor('#000099');return false">&nbsp;&nbsp;&nbsp;</a> 
     84</font> 
     85</td> 
     86<td bgcolor="#0000cc"> 
     87<font size="-3"> 
     88<a href="#" onclick="canvas.setStrokeColor('#0000CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     89</font> 
     90</td> 
     91<td bgcolor="#0000ff"> 
     92<font size="-3"> 
     93<a href="#" onclick="canvas.setStrokeColor('#0000FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     94</font> 
     95</td> 
     96<td bgcolor="#330000"> 
     97<font size="-3"> 
     98<a href="#" onclick="canvas.setStrokeColor('#330000');return false">&nbsp;&nbsp;&nbsp;</a> 
     99</font> 
     100</td> 
     101<td bgcolor="#330033"> 
     102<font size="-3"> 
     103<a href="#" onclick="canvas.setStrokeColor('#330033');return false">&nbsp;&nbsp;&nbsp;</a> 
     104</font> 
     105</td> 
     106<td bgcolor="#330066"> 
     107<font size="-3"> 
     108<a href="#" onclick="canvas.setStrokeColor('#330066');return false">&nbsp;&nbsp;&nbsp;</a> 
     109</font> 
     110</td> 
     111<td bgcolor="#330099"> 
     112<font size="-3"> 
     113<a href="#" onclick="canvas.setStrokeColor('#330099');return false">&nbsp;&nbsp;&nbsp;</a> 
     114</font> 
     115</td> 
     116<td bgcolor="#3300cc"> 
     117<font size="-3"> 
     118<a href="#" onclick="canvas.setStrokeColor('#3300CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     119</font> 
     120</td> 
     121<td bgcolor="#3300ff"> 
     122<font size="-3"> 
     123<a href="#" onclick="canvas.setStrokeColor('#3300FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     124</font> 
     125</td> 
     126<td bgcolor="#660000"> 
     127<font size="-3"> 
     128<a href="#" onclick="canvas.setStrokeColor('#660000');return false">&nbsp;&nbsp;&nbsp;</a> 
     129</font> 
     130</td> 
     131<td bgcolor="#660033"> 
     132<font size="-3"> 
     133<a href="#" onclick="canvas.setStrokeColor('#660033');return false">&nbsp;&nbsp;&nbsp;</a> 
     134</font> 
     135</td> 
     136<td bgcolor="#660066"> 
     137<font size="-3"> 
     138<a href="#" onclick="canvas.setStrokeColor('#660066');return false">&nbsp;&nbsp;&nbsp;</a> 
     139</font> 
     140</td> 
     141<td bgcolor="#660099"> 
     142<font size="-3"> 
     143<a href="#" onclick="canvas.setStrokeColor('#660099');return false">&nbsp;&nbsp;&nbsp;</a> 
     144</font> 
     145</td> 
     146<td bgcolor="#6600cc"> 
     147<font size="-3"> 
     148<a href="#" onclick="canvas.setStrokeColor('#6600CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     149</font> 
     150</td> 
     151<td bgcolor="#6600ff"> 
     152<font size="-3"> 
     153<a href="#" onclick="canvas.setStrokeColor('#6600FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     154</font> 
     155</td> 
     156</tr> 
     157<tr> 
     158<td bgcolor="#990000"> 
     159<font size="-3"> 
     160<a href="#" onclick="canvas.setStrokeColor('#990000');return false">&nbsp;&nbsp;&nbsp;</a> 
     161</font> 
     162</td> 
     163<td bgcolor="#990033"> 
     164<font size="-3"> 
     165<a href="#" onclick="canvas.setStrokeColor('#990033');return false">&nbsp;&nbsp;&nbsp;</a> 
     166</font> 
     167</td> 
     168<td bgcolor="#990066"> 
     169<font size="-3"> 
     170<a href="#" onclick="canvas.setStrokeColor('#990066');return false">&nbsp;&nbsp;&nbsp;</a> 
     171</font> 
     172</td> 
     173<td bgcolor="#990099"> 
     174<font size="-3"> 
     175<a href="#" onclick="canvas.setStrokeColor('#990099');return false">&nbsp;&nbsp;&nbsp;</a> 
     176</font> 
     177</td> 
     178<td bgcolor="#9900cc"> 
     179<font size="-3"> 
     180<a href="#" onclick="canvas.setStrokeColor('#9900CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     181</font> 
     182</td> 
     183<td bgcolor="#9900ff"> 
     184<font size="-3"> 
     185<a href="#" onclick="canvas.setStrokeColor('#9900FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     186</font> 
     187</td> 
     188<td bgcolor="#cc0000"> 
     189<font size="-3"> 
     190<a href="#" onclick="canvas.setStrokeColor('#CC0000');return false">&nbsp;&nbsp;&nbsp;</a> 
     191</font> 
     192</td> 
     193<td bgcolor="#cc0033"> 
     194<font size="-3"> 
     195<a href="#" onclick="canvas.setStrokeColor('#CC0033');return false">&nbsp;&nbsp;&nbsp;</a> 
     196</font> 
     197</td> 
     198<td bgcolor="#cc0066"> 
     199<font size="-3"> 
     200<a href="#" onclick="canvas.setStrokeColor('#CC0066');return false">&nbsp;&nbsp;&nbsp;</a> 
     201</font> 
     202</td> 
     203<td bgcolor="#cc0099"> 
     204<font size="-3"> 
     205<a href="#" onclick="canvas.setStrokeColor('#CC0099');return false">&nbsp;&nbsp;&nbsp;</a> 
     206</font> 
     207</td> 
     208<td bgcolor="#cc00cc"> 
     209<font size="-3"> 
     210<a href="#" onclick="canvas.setStrokeColor('#CC00CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     211</font> 
     212</td> 
     213<td bgcolor="#cc00ff"> 
     214<font size="-3"> 
     215<a href="#" onclick="canvas.setStrokeColor('#CC00FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     216</font> 
     217</td> 
     218<td bgcolor="#ff0000"> 
     219<font size="-3"> 
     220<a href="#" onclick="canvas.setStrokeColor('#FF0000');return false">&nbsp;&nbsp;&nbsp;</a> 
     221</font> 
     222</td> 
     223<td bgcolor="#ff0033"> 
     224<font size="-3"> 
     225<a href="#" onclick="canvas.setStrokeColor('#FF0033');return false">&nbsp;&nbsp;&nbsp;</a> 
     226</font> 
     227</td> 
     228<td bgcolor="#ff0066"> 
     229<font size="-3"> 
     230<a href="#" onclick="canvas.setStrokeColor('#FF0066');return false">&nbsp;&nbsp;&nbsp;</a> 
     231</font> 
     232</td> 
     233<td bgcolor="#ff0099"> 
     234<font size="-3"> 
     235<a href="#" onclick="canvas.setStrokeColor('#FF0099');return false">&nbsp;&nbsp;&nbsp;</a> 
     236</font> 
     237</td> 
     238<td bgcolor="#ff00cc"> 
     239<font size="-3"> 
     240<a href="#" onclick="canvas.setStrokeColor('#FF00CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     241</font> 
     242</td> 
     243<td bgcolor="#ff00ff"> 
     244<font size="-3"> 
     245<a href="#" onclick="canvas.setStrokeColor('#FF00FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     246</font> 
     247</td> 
     248</tr> 
     249<tr> 
     250<td bgcolor="#003300"> 
     251<font size="-3"> 
     252<a href="#" onclick="canvas.setStrokeColor('#003300');return false">&nbsp;&nbsp;&nbsp;</a> 
     253</font> 
     254</td> 
     255<td bgcolor="#003333"> 
     256<font size="-3"> 
     257<a href="#" onclick="canvas.setStrokeColor('#003333');return false">&nbsp;&nbsp;&nbsp;</a> 
     258</font> 
     259</td> 
     260<td bgcolor="#003366"> 
     261<font size="-3"> 
     262<a href="#" onclick="canvas.setStrokeColor('#003366');return false">&nbsp;&nbsp;&nbsp;</a> 
     263</font> 
     264</td> 
     265<td bgcolor="#003399"> 
     266<font size="-3"> 
     267<a href="#" onclick="canvas.setStrokeColor('#003399');return false">&nbsp;&nbsp;&nbsp;</a> 
     268</font> 
     269</td> 
     270<td bgcolor="#0033cc"> 
     271<font size="-3"> 
     272<a href="#" onclick="canvas.setStrokeColor('#0033CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     273</font> 
     274</td> 
     275<td bgcolor="#0033ff"> 
     276<font size="-3"> 
     277<a href="#" onclick="canvas.setStrokeColor('#0033FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     278</font> 
     279</td> 
     280<td bgcolor="#333300"> 
     281<font size="-3"> 
     282<a href="#" onclick="canvas.setStrokeColor('#333300');return false">&nbsp;&nbsp;&nbsp;</a> 
     283</font> 
     284</td> 
     285<td bgcolor="#333333"> 
     286<font size="-3"> 
     287<a href="#" onclick="canvas.setStrokeColor('#333333');return false">&nbsp;&nbsp;&nbsp;</a> 
     288</font> 
     289</td> 
     290<td bgcolor="#333366"> 
     291<font size="-3"> 
     292<a href="#" onclick="canvas.setStrokeColor('#333366');return false">&nbsp;&nbsp;&nbsp;</a> 
     293</font> 
     294</td> 
     295<td bgcolor="#333399"> 
     296<font size="-3"> 
     297<a href="#" onclick="canvas.setStrokeColor('#333399');return false">&nbsp;&nbsp;&nbsp;</a> 
     298</font> 
     299</td> 
     300<td bgcolor="#3333cc"> 
     301<font size="-3"> 
     302<a href="#" onclick="canvas.setStrokeColor('#3333CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     303</font> 
     304</td> 
     305<td bgcolor="#3333ff"> 
     306<font size="-3"> 
     307<a href="#" onclick="canvas.setStrokeColor('#3333FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     308</font> 
     309</td> 
     310<td bgcolor="#663300"> 
     311<font size="-3"> 
     312<a href="#" onclick="canvas.setStrokeColor('#663300');return false">&nbsp;&nbsp;&nbsp;</a> 
     313</font> 
     314</td> 
     315<td bgcolor="#663333"> 
     316<font size="-3"> 
     317<a href="#" onclick="canvas.setStrokeColor('#663333');return false">&nbsp;&nbsp;&nbsp;</a> 
     318</font> 
     319</td> 
     320<td bgcolor="#663366"> 
     321<font size="-3"> 
     322<a href="#" onclick="canvas.setStrokeColor('#663366');return false">&nbsp;&nbsp;&nbsp;</a> 
     323</font> 
     324</td> 
     325<td bgcolor="#663399"> 
     326<font size="-3"> 
     327<a href="#" onclick="canvas.setStrokeColor('#663399');return false">&nbsp;&nbsp;&nbsp;</a> 
     328</font> 
     329</td> 
     330<td bgcolor="#6633cc"> 
     331<font size="-3"> 
     332<a href="#" onclick="canvas.setStrokeColor('#6633CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     333</font> 
     334</td> 
     335<td bgcolor="#6633ff"> 
     336<font size="-3"> 
     337<a href="#" onclick="canvas.setStrokeColor('#6633FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     338</font> 
     339</td> 
     340</tr> 
     341<tr> 
     342<td bgcolor="#993300"> 
     343<font size="-3"> 
     344<a href="#" onclick="canvas.setStrokeColor('#993300');return false">&nbsp;&nbsp;&nbsp;</a> 
     345</font> 
     346</td> 
     347<td bgcolor="#993333"> 
     348<font size="-3"> 
     349<a href="#" onclick="canvas.setStrokeColor('#993333');return false">&nbsp;&nbsp;&nbsp;</a> 
     350</font> 
     351</td> 
     352<td bgcolor="#993366"> 
     353<font size="-3"> 
     354<a href="#" onclick="canvas.setStrokeColor('#993366');return false">&nbsp;&nbsp;&nbsp;</a> 
     355</font> 
     356</td> 
     357<td bgcolor="#993399"> 
     358<font size="-3"> 
     359<a href="#" onclick="canvas.setStrokeColor('#993399');return false">&nbsp;&nbsp;&nbsp;</a> 
     360</font> 
     361</td> 
     362<td bgcolor="#9933cc"> 
     363<font size="-3"> 
     364<a href="#" onclick="canvas.setStrokeColor('#9933CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     365</font> 
     366</td> 
     367<td bgcolor="#9933ff"> 
     368<font size="-3"> 
     369<a href="#" onclick="canvas.setStrokeColor('#9933FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     370</font> 
     371</td> 
     372<td bgcolor="#cc3300"> 
     373<font size="-3"> 
     374<a href="#" onclick="canvas.setStrokeColor('#CC3300');return false">&nbsp;&nbsp;&nbsp;</a> 
     375</font> 
     376</td> 
     377<td bgcolor="#cc3333"> 
     378<font size="-3"> 
     379<a href="#" onclick="canvas.setStrokeColor('#CC3333');return false">&nbsp;&nbsp;&nbsp;</a> 
     380</font> 
     381</td> 
     382<td bgcolor="#cc33cc"> 
     383<font size="-3"> 
     384<a href="#" onclick="canvas.setStrokeColor('#CC33CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     385</font> 
     386</td> 
     387<td bgcolor="#cc33ff"> 
     388<font size="-3"> 
     389<a href="#" onclick="canvas.setStrokeColor('#CC33FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     390</font> 
     391</td> 
     392<td bgcolor="#ff3300"> 
     393<font size="-3"> 
     394<a href="#" onclick="canvas.setStrokeColor('#FF3300');return false">&nbsp;&nbsp;&nbsp;</a> 
     395</font> 
     396</td> 
     397<td bgcolor="#ff3333"> 
     398<font size="-3"> 
     399<a href="#" onclick="canvas.setStrokeColor('#FF3333');return false">&nbsp;&nbsp;&nbsp;</a> 
     400</font> 
     401</td> 
     402<td bgcolor="#ff3366"> 
     403<font size="-3"> 
     404<a href="#" onclick="canvas.setStrokeColor('#FF3366');return false">&nbsp;&nbsp;&nbsp;</a> 
     405</font> 
     406</td> 
     407<td bgcolor="#ff3399"> 
     408<font size="-3"> 
     409<a href="#" onclick="canvas.setStrokeColor('#FF3399');return false">&nbsp;&nbsp;&nbsp;</a> 
     410</font> 
     411</td> 
     412<td bgcolor="#ff33cc"> 
     413<font size="-3"> 
     414<a href="#" onclick="canvas.setStrokeColor('#FF33CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     415</font> 
     416</td> 
     417<td bgcolor="#ff33ff"> 
     418<font size="-3"> 
     419<a href="#" onclick="canvas.setStrokeColor('#FF33FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     420</font> 
     421</td> 
     422</tr> 
     423<tr> 
     424<td bgcolor="#006600"> 
     425<font size="-3"> 
     426<a href="#" onclick="canvas.setStrokeColor('#006600');return false">&nbsp;&nbsp;&nbsp;</a> 
     427</font> 
     428</td> 
     429<td bgcolor="#006633"> 
     430<font size="-3"> 
     431<a href="#" onclick="canvas.setStrokeColor('#006633');return false">&nbsp;&nbsp;&nbsp;</a> 
     432</font> 
     433</td> 
     434<td bgcolor="#006666"> 
     435<font size="-3"> 
     436<a href="#" onclick="canvas.setStrokeColor('#006666');return false">&nbsp;&nbsp;&nbsp;</a> 
     437</font> 
     438</td> 
     439<td bgcolor="#006699"> 
     440<font size="-3"> 
     441<a href="#" onclick="canvas.setStrokeColor('#006699');return false">&nbsp;&nbsp;&nbsp;</a> 
     442</font> 
     443</td> 
     444<td bgcolor="#0066cc"> 
     445<font size="-3"> 
     446<a href="#" onclick="canvas.setStrokeColor('#0066CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     447</font> 
     448</td> 
     449<td bgcolor="#336699"> 
     450<font size="-3"> 
     451<a href="#" onclick="canvas.setStrokeColor('#336699');return false">&nbsp;&nbsp;&nbsp;</a> 
     452</font> 
     453</td> 
     454<td bgcolor="#3366cc"> 
     455<font size="-3"> 
     456<a href="#" onclick="canvas.setStrokeColor('#3366CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     457</font> 
     458</td> 
     459<td bgcolor="#3366ff"> 
     460<font size="-3"> 
     461<a href="#" onclick="canvas.setStrokeColor('#3366FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     462</font> 
     463</td> 
     464<td bgcolor="#666600"> 
     465<font size="-3"> 
     466<a href="#" onclick="canvas.setStrokeColor('#666600');return false">&nbsp;&nbsp;&nbsp;</a> 
     467</font> 
     468</td> 
     469<td bgcolor="#666633"> 
     470<font size="-3"> 
     471<a href="#" onclick="canvas.setStrokeColor('#666633');return false">&nbsp;&nbsp;&nbsp;</a> 
     472</font> 
     473</td> 
     474<td bgcolor="#666666"> 
     475<font size="-3"> 
     476<a href="#" onclick="canvas.setStrokeColor('#666666');return false">&nbsp;&nbsp;&nbsp;</a> 
     477</font> 
     478</td> 
     479<td bgcolor="#666699"> 
     480<font size="-3"> 
     481<a href="#" onclick="canvas.setStrokeColor('#666699');return false">&nbsp;&nbsp;&nbsp;</a> 
     482</font> 
     483</td> 
     484<td bgcolor="#6666cc"> 
     485<font size="-3"> 
     486<a href="#" onclick="canvas.setStrokeColor('#6666CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     487</font> 
     488</td> 
     489<td bgcolor="#6666ff"> 
     490<font size="-3"> 
     491<a href="#" onclick="canvas.setStrokeColor('#6666FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     492</font> 
     493</td> 
     494</tr> 
     495<tr> 
     496<td bgcolor="#996600"> 
     497<font size="-3"> 
     498<a href="#" onclick="canvas.setStrokeColor('#996600');return false">&nbsp;&nbsp;&nbsp;</a> 
     499</font> 
     500</td> 
     501<td bgcolor="#996633"> 
     502<font size="-3"> 
     503<a href="#" onclick="canvas.setStrokeColor('#996633');return false">&nbsp;&nbsp;&nbsp;</a> 
     504</font> 
     505</td> 
     506<td bgcolor="#9966ff"> 
     507<font size="-3"> 
     508<a href="#" onclick="canvas.setStrokeColor('#9966FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     509</font> 
     510</td> 
     511<td bgcolor="#cc6600"> 
     512<font size="-3"> 
     513<a href="#" onclick="canvas.setStrokeColor('#CC6600');return false">&nbsp;&nbsp;&nbsp;</a> 
     514</font> 
     515</td> 
     516<td bgcolor="#cc6633"> 
     517<font size="-3"> 
     518<a href="#" onclick="canvas.setStrokeColor('#CC6633');return false">&nbsp;&nbsp;&nbsp;</a> 
     519</font> 
     520</td> 
     521<td bgcolor="#cc6666"> 
     522<font size="-3"> 
     523<a href="#" onclick="canvas.setStrokeColor('#CC6666');return false">&nbsp;&nbsp;&nbsp;</a> 
     524</font> 
     525</td> 
     526<td bgcolor="#cc6699"> 
     527<font size="-3"> 
     528<a href="#" onclick="canvas.setStrokeColor('#CC6699');return false">&nbsp;&nbsp;&nbsp;</a> 
     529</font> 
     530</td> 
     531<td bgcolor="#cc66cc"> 
     532<font size="-3"> 
     533<a href="#" onclick="canvas.setStrokeColor('#CC66CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     534</font> 
     535</td> 
     536<td bgcolor="#cc66ff"> 
     537<font size="-3"> 
     538<a href="#" onclick="canvas.setStrokeColor('#CC66FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     539</font> 
     540</td> 
     541<td bgcolor="#ff6600"> 
     542<font size="-3"> 
     543<a href="#" onclick="canvas.setStrokeColor('#FF6600');return false">&nbsp;&nbsp;&nbsp;</a> 
     544</font> 
     545</td> 
     546<td bgcolor="#ff6633"> 
     547<font size="-3"> 
     548<a href="#" onclick="canvas.setStrokeColor('#FF6633');return false">&nbsp;&nbsp;&nbsp;</a> 
     549</font> 
     550</td> 
     551</tr> 
     552<tr> 
     553<td bgcolor="#009900"> 
     554<font size="-3"> 
     555<a href="#" onclick="canvas.setStrokeColor('#009900');return false">&nbsp;&nbsp;&nbsp;</a> 
     556</font> 
     557</td> 
     558<td bgcolor="#009933"> 
     559<font size="-3"> 
     560<a href="#" onclick="canvas.setStrokeColor('#009933');return false">&nbsp;&nbsp;&nbsp;</a> 
     561</font> 
     562</td> 
     563<td bgcolor="#009966"> 
     564<font size="-3"> 
     565<a href="#" onclick="canvas.setStrokeColor('#009966');return false">&nbsp;&nbsp;&nbsp;</a> 
     566</font> 
     567</td> 
     568<td bgcolor="#009999"> 
     569<font size="-3"> 
     570<a href="#" onclick="canvas.setStrokeColor('#009999');return false">&nbsp;&nbsp;&nbsp;</a> 
     571</font> 
     572</td> 
     573<td bgcolor="#0099cc"> 
     574<font size="-3"> 
     575<a href="#" onclick="canvas.setStrokeColor('#0099CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     576</font> 
     577</td> 
     578<td bgcolor="#0099ff"> 
     579<font size="-3"> 
     580<a href="#" onclick="canvas.setStrokeColor('#0099FF');return false">&nbsp;&nbsp;&nbsp;</a> 
     581</font> 
     582</td> 
     583<td bgcolor="#339900"> 
     584<font size="-3"> 
     585<a href="#" onclick="canvas.setStrokeColor('#339900');return false">&nbsp;&nbsp;&nbsp;</a> 
     586</font> 
     587</td> 
     588<td bgcolor="#339933"> 
     589<font size="-3"> 
     590<a href="#" onclick="canvas.setStrokeColor('#339933');return false">&nbsp;&nbsp;&nbsp;</a> 
     591</font> 
     592</td> 
     593<td bgcolor="#339966"> 
     594<font size="-3"> 
     595<a href="#" onclick="canvas.setStrokeColor('#339966');return false">&nbsp;&nbsp;&nbsp;</a> 
     596</font> 
     597</td> 
     598<td bgcolor="#339999"> 
     599<font size="-3"> 
     600<a href="#" onclick="canvas.setStrokeColor('#339999');return false">&nbsp;&nbsp;&nbsp;</a> 
     601</font> 
     602</td> 
     603<td bgcolor="#3399cc"> 
     604<font size="-3"> 
     605<a href="#" onclick="canvas.setStrokeColor('#3399CC');return false">&nbsp;&nbsp;&nbsp;</a> 
     606</font> 
     607</td> 
     608</tr> 
     609</table> 
    44610    </div> 
    45611    <div id="map"></div> 

  • sandbox/crschmidt/canvas/lib/OpenLayers/Layer/Canvas.js

    r1297 r1336  
    7676 
    7777    drawLine: function(start, end) { 
     78        var ctx = this.canvas.getContext("2d"); 
    7879        this.addLine(start, end); 
    79         this.lines.push(new Array(start,end)); 
     80        this.lines.push(new Array(start,end, ctx.strokeStyle, ctx.lineWidth, ctx.globalAlpha)); 
    8081    }, 
    8182    addLine: function(start, end) { 
    82  
    8383        var ctx = this.canvas.getContext("2d"); 
    8484        var startpx = this.map.getPixelFromLonLat(start); 
    …… 
    106106        } 
    107107        for(var i=0; i < this.lines.length; i++) { 
     108            this.setStrokeColor(this.lines[i][2]); 
     109            this.setStrokeWidth(this.lines[i][3]); 
     110            this.setAlpha(this.lines[i][4]); 
    108111            this.addLine(this.lines[i][0], this.lines[i][1]); 
    109112        }