Znacznik canvas w HTML-u
Stronę tą wyświetlono już: 2581 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:
Propozycje książek
