HTML/Сanvas
< HTML
Использование тега <canvas> (Using the <canvas> Tag)
правитьФрагмент кода ниже продемонстрировать некоторые особенности холст. Попробуйте играть и экспериментировать с фрагментом кода, изменив параметры вызовов методов.
<!DOCTYPE html>
<html lang='en'>
<head>
<!--[if IE]><script type='text/javascript' src='excanvas-c73p.js'></script><![endif]-->
</head>
<body style='padding:10px;' onload='doDraw();'>
<canvas id='myCanvas' width='400' height='200'></canvas>
<input type='button' value='Refresh Canvas' onclick='doDraw();'
style='vertical-align:top;'/>
<hr/>
<div style='font-size:0.8em;'>
The original chicken image was downloaded from
<a href='http://www.sitevip.net/gifs/chicken'>
http://www.sitevip.net/gifs/chicken</a>.
</div>
<img id='imgChickenBaby' src='image/chicken-baby.gif'/>
</body>
</html>
<script type='text/javascript'>
function doDraw()
{
// Get access to the canvas
var myCanvas = document.getElementById('myCanvas');
var vCtx = myCanvas.getContext('2d');
// Set the canvas background and border
myCanvas.style.background = '#000000';
myCanvas.style.border = '3px solid #7F7F7F';
// Clear the canvas
vCtx.clearRect(0, 0, myCanvas.width, myCanvas.height);
// Draw rectangles
vCtx.fillStyle = '#00FF00';
vCtx.strokeStyle = '#FF0000';
vCtx.lineWidth = 2;
vCtx.fillRect (10, 10, 50, 50);
vCtx.strokeRect(30, 30, 50, 50);
// Draw a path
vCtx.beginPath();
vCtx.moveTo(100, 25);
vCtx.lineTo(175, 50);
vCtx.lineTo(125, 65);
vCtx.closePath();
vCtx.strokeStyle = '#0000FF';
vCtx.stroke();
// Draw rectangles using gradient
var vGrad1 = vCtx.createLinearGradient(200, 0, 250, 0);
vGrad1.addColorStop(0.0, '#FF0000');
vGrad1.addColorStop(0.5, '#00FF00');
vGrad1.addColorStop(1.0, '#0000FF');
vCtx.fillStyle = vGrad1;
vCtx.fillRect(200, 10, 50, 50);
var vGrad2 = vCtx.createLinearGradient(260, 10, 310, 60);
vGrad2.addColorStop(0.0, '#FF0000');
vGrad2.addColorStop(0.5, '#00FF00');
vGrad2.addColorStop(1.0, '#0000FF');
vCtx.fillStyle = vGrad2;
vCtx.fillRect(260, 10, 50, 50);
// Draw a circle with glow (white shadow)
vCtx.shadowBlur = 25;
vCtx.shadowColor = '#FFFFFF';
vCtx.shadowOffsetX = 0;
vCtx.shadowOffsetY = 0;
vCtx.beginPath();
vCtx.arc(350, 35, 25, 0, Math.PI * 2, false);
vCtx.fill();
vCtx.shadowColor = 'transparent black';
// Draw images
var imgChickenBaby = document.getElementById('imgChickenBaby');
vCtx.drawImage(imgChickenBaby, 10, 100 );
vCtx.drawImage(imgChickenBaby, 50, 100, 44, 66 );
vCtx.drawImage(imgChickenBaby, 5, 5, 12, 12, 120, 100, 48, 48);
}
</script>
Объяснение
правитьВо-первых, нам необходимо определить холст стиль (фон / ясный цвет и границы), используя стандартные CSS, такие как:
myCanvas.style.background = '# 000000';
myCanvas.style.border = '3px solid #7F7F7F';
| Курс HTML |
| Предыдущий урок: HTML/Формы — Следующий курс: CSS |