Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="pl">
- <head>
- <meta charset="utf-8"> <title>Canvas</title>
- <script type="text/javascript">
- function draw()
- { var canvas = document.getElementById('image');
- var context = canvas.getContext('2d');
- context.fillStyle = 'yellow';
- context.fillRect(0,0,100,100);
- context.strokeRect(0,0,100,100);
- context.fillStyle = 'red';
- context.fillRect(30,30,30,30);
- context.beginPath();
- context.moveTo(50,50); context.lineTo(100,0);
- context.lineTo(150,50); context.lineTo(100,100); context.lineTo(50,50);
- context.fillStyle = 'green';
- context.fill();
- context. closePath();
- context.beginPath();
- context.arc(200,200,80,Math.PI,0,false);
- context.closePath();
- context.lineWidth = 10;
- context.strokeStyle = "black";
- context.stroke();
- context.beginPath();
- context.moveTo(50,250); context.quadraticCurveTo(100,50,180,280);
- context.closePath();
- context.strokeStyle = "red";
- context.stroke();
- image = new Image();
- image.src = "br.jpg";
- image.onload = function () {context.drawImage(image, 200,200,200,200); };
- image.fillStyle = "white";
- for (var i = 0; i < 1; i += 0.04) {
- context.globalAlpha = i;
- context.fillRect(0, i * 300, 350, 10); }
- }
- </script>
- </head>
- <body onload="draw();">
- <canvas id="image" width="300" height="300">
- Twoja przeglądarka nie wspiera Canvas! Zainstaluj Internet Explorer 9.
- </canvas>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
