Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2843 razy

Znacznik <canvas> w HTML-u przeznaczony jest głównie pod tworzenie animacji z wykorzystaniem skryptów JavaScript na stronie. Oto przykład dodania takiego elementu na stronie:

<canvas width="300" height="50" style="margin:auto; background: black; display:block"></canvas>

Wystarczy teraz dodać kod JavaScript, który coś wyświetli wewnątrz znacznika <canvas>:

<canvas id="myCanvas" width="300" height="50" style="margin:auto; background: black; display:block"></canvas> <script type="text/javascript"> function OnResize(){ var c = document.getElementById("myCanvas"); var draw = c.getContext("2d"); c.width = window.innerWidth - 330; var grd = draw.createLinearGradient(0,0,c.width,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); grd.addColorStop(0, 'rgba(0,204,255,1.00)'); grd.addColorStop(0.04, 'rgba(51,204,204,1.00)'); grd.addColorStop(0.09, 'rgba(0,153,255,1.00)'); grd.addColorStop(0.13, 'rgba(0,102,255,1.00)'); grd.addColorStop(0.17, 'rgba(51,102,255,1.00)'); grd.addColorStop(0.22, 'rgba(102,102,255,1.00)'); grd.addColorStop(0.26, 'rgba(153,102,255,1.00)'); grd.addColorStop(0.3, 'rgba(204,51,255,1.00)'); grd.addColorStop(0.35, 'rgba(255,0,255,1.00)'); grd.addColorStop(0.39, 'rgba(255,51,204,1.00)'); grd.addColorStop(0.43, 'rgba(255,51,153,1.00)'); grd.addColorStop(0.48, 'rgba(255,0,102,1.00)'); grd.addColorStop(0.52, 'rgba(255,80,80,1.00)'); grd.addColorStop(0.57, 'rgba(255,102,0,1.00)'); grd.addColorStop(0.61, 'rgba(255,153,51,1.00)'); grd.addColorStop(0.65, 'rgba(255,204,0,1.00)'); grd.addColorStop(0.7, 'rgba(255,255,0,1.00)'); grd.addColorStop(0.74, 'rgba(204,255,51,1.00)'); grd.addColorStop(0.78, 'rgba(153,255,51,1.00)'); grd.addColorStop(0.83, 'rgba(102,255,51,1.00)'); grd.addColorStop(0.87, 'rgba(51,204,51,1.00)'); grd.addColorStop(0.91, 'rgba(0,255,0,1.00)'); grd.addColorStop(0.96, 'rgba(0,255,153,1.00)'); grd.addColorStop(1, 'rgba(0,255,204,1.00)'); draw.fillStyle = grd; draw.fillRect(0,0,c.width,c.height); } OnResize(); window.onresize = OnResize; </script>

Wynik działania powyższego kodu: