7. Додати градієнт на полотно використовуючи Canvas api.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Colors, Styles and Gradients</title>
<script type="text/javascript">
function setup() {
var canvas = document.getElementById('lessonCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
<!-- canvas outline -->
ctx.strokeRect(0, 0, 300, 300);
ctx.fillStyle = 'gray';
<!-- shadow -->
ctx.beginPath();
ctx.moveTo(175, 262);
ctx.quadraticCurveTo(142, 273, 115, 258);
ctx.bezierCurveTo(60, 268, 155, 286, 175, 262);
ctx.fill();
<!-- cup inline -->
ctx.beginPath();
ctx.moveTo(110.5, 260); ctx.bezierCurveTo(110.5, 260, 140, 246, 176.5, 260);
ctx.stroke();
var lineGrad = ctx.createLinearGradient(150, 81, 150, 268);
lineGrad.addColorStop(0, '#fff');
lineGrad.addColorStop(0.05, '#450c0c');
lineGrad.addColorStop(0.6, '#874040');
lineGrad.addColorStop(1, 'rgba(202, 147, 147, 0.6)');
ctx.fillStyle = lineGrad;
<!-- cup outline -->
ctx.beginPath();
ctx.moveTo(194, 79);
ctx.lineTo(95, 79);
ctx.bezierCurveTo(96, 98, 95, 102, 95, 102);
ctx.bezierCurveTo(90, 125, 100, 150, 100, 150);
ctx.bezierCurveTo(111, 184.5, 110, 262, 110, 262);
ctx.bezierCurveTo(143, 274, 175, 262, 175, 262);
ctx.bezierCurveTo(177, 188, 191, 145, 191, 145);
ctx.bezierCurveTo(191, 145, 199, 121.5, 194, 102.5);
ctx.lineTo(194, 79);
ctx.stroke();
ctx.fill();
<!-- bubbles -->
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)'
ctx.lineWidth = 2;
var radGrad = ctx.createRadialGradient(116, 107, 1, 120, 110, 10);
radGrad.addColorStop(0, 'white');
radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = radGrad;
ctx.beginPath();
ctx.arc(120, 110, 10, 0, Math.PI * 2, false);
ctx.fill();
ctx.stroke();
radGrad = ctx.createRadialGradient(164, 140, 1, 168, 143, 8);
radGrad.addColorStop(0, 'white');
radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = radGrad;
ctx.beginPath();
ctx.arc(168, 143, 8, 0, Math.PI * 2, false);
ctx.fill();
ctx.stroke();
radGrad = ctx.createRadialGradient(127, 185, 1, 130, 188, 6);
radGrad.addColorStop(0, 'white');
radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = radGrad;
ctx.beginPath();
ctx.arc(130, 188, 6, 0, Math.PI * 2, false);
ctx.fill();
ctx.stroke();
}
}
</script>
</head>
<body onload="setup();">
<canvas id="lessonCanvas" width="300" height="300"style="margin:100px;"></canvas>
</body>
</html>
8. Додав зображеня на полотно Canvas
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding Images</title>
<script type="text/javascript">
function setup() {
var canvas = document.getElementById('lessonCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img, 0, 0);
//ctx.drawImage(img, 0, 0, 300, 200);
//ctx.drawImage(img, 287, 132, 100, 100, 0, 0, 300, 300);
}
img.src = 'images/fishlake.jpg';
}
}
</script>
</head>
<body onload="setup();">
<canvas id="lessonCanvas" width="300" height="300"style="margin:100px;"></canvas>
</body>
</html>