Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>flowers</title>
- </head>
- <canvas id="canvas1" width="640" height="480" style="border: 1px solid black;
- position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
- <canvas id="canvas2" width="640" height="480" style="border: 1px solid black;
- position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
- <body>
- <script>
- var layer1 = document.getElementById("canvas1");
- var dt1 = layer1.getContext("2d");
- var layer2 = document.getElementById("canvas2");
- var dt2 = layer2.getContext("2d");
- // Draw water.
- dt1.fillStyle = "#99ffff"
- dt1.fillRect(0, 0, 640, 350);
- //Draw the sand.
- dt1.fillStyle = "#ffcc99";
- dt1.fillRect(0, 300, 640, 180);
- //call the "runFunc" when mouse is clicked
- document,addEventListener("click",runFunc);
- function runFunc()
- {
- dt2.clearRect(0,0,canvas2.width,canvas2.height);
- for (var i = 1; i<=200;i++)
- {
- //flower(Math.ceil(Math.random()*canvas2.width),Math.floor(Math.random()*canvas2.height),"#663399")
- flower(Math.ceil(Math.random()*640),Math.floor(Math.random()*480),randomColour())
- }
- }
- function flower(xPos, yPos, colour)
- {
- // Draw the stem.
- dt2.strokeStyle = "#ff9900";
- dt2.lineWidth = 3;
- dt2.beginPath();
- dt2.strokeRect(xPos,yPos,30,50)
- dt2.fillRect();
- // Draw petal in specified colour.
- dt2.fillStyle = colour;
- dt2.beginPath();
- dt2.arc(xPos, yPos, 15, 0, 2*Math.PI);
- dt2.fill();
- // Draw yellow stamen.
- dt2.fillStyle = "#FFFF71";
- dt2.beginPath();
- dt2.arc(xPos, yPos, 10, 0, 2*Math.PI);
- dt2.fill();
- }
- function randomColour()
- {
- red = Math.floor(Math.random()*255)+1;
- green = Math.floor(Math.random()*255)+1;
- blue = Math.floor(Math.random()*255)+1;
- return "rgb("+red+","+green+","+blue+")";
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement