Using HTML5 Codes, created a 'landscape' with 14 different shapes. Using a variation of Bezier Curves, Quadratic Curves, and Circles. Also included different colors and color gradients through out the composition. Below is the HTML 5 code it's self taken directly from Text Wrangler.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line
var x = 100;
var y = 100;
var width = 400;
var height = 400;
var x1 = 0;
var y1 = 0;
var startX = 400;
var startY = 0;
var endX = 400;
var endY = 400;
// background
context.beginPath();
context.rect(x1, y1, canvas.width, canvas.height);
context.fillStyle = 'rgb(245,245,220)';
var grd = context.createLinearGradient(startX, startY, endX, endY);
grd.addColorStop(.5, 'rgb(173,216,230)');
grd.addColorStop(.3, 'rgb(135,206,250)');
context.fillStyle = grd;
context.fill();
// cloud1
var startx = 100;
var starty = 60;
var controlx1 = 55;
var controly1 = 130;
var controlx2 = 100;
var controly2 = 140;
var endx = 200;
var endy = 130;
var controlx3 = 220;
var controly3 = 160;
var controlx4 = 290;
var controly4 = 160;
var endx1 = 310;
var endy1 = 130;
var controlx5 = 390;
var controly5 = 130;
var controlx6 = 390;
var controly6 = 100;
var endx2 = 350;
var endy2 = 100;
var controlx7 = 350;
var controly7 = 20;
var controlx8 = 300;
var controly8 = 10;
var endx3 = 200;
var endy3 = 40;
var controlx9 = 150;
var controly9 = 5;
var controlx10 = 60;
var controly10 = 10;
var endx4 = 100;
var endy4 = 60;
context.beginPath();
context.moveTo(startx, starty);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
//context.moveTo(endx, endy); <-- Nope, only pick up pen once.
context.bezierCurveTo(controlx3, controly3, controlx4, controly4, endx1, endy1);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, endx2, endy2);
context.bezierCurveTo(controlx7, controly7, controlx8, controly8, endx3, endy3);
context.bezierCurveTo(controlx9, controly9, controlx10, controly10, endx4, endy4);
context.fillStyle = 'rgb(240,255,255)';
context.fill();
context.strokeStyle = 'rgb(240, 255, 255)';
context.stroke();
context.stroke();
//cloud2
var startx1 = 550;
var starty1 = 40;
var controlx11 = 400;
var controly11 = 30;
var controlx12 = 400;
var controly12 = 80;
var endx5 = 500;
var endy5 = 80;
var controlx13 = 440;
var controly13 = 100;
var controlx14 = 430;
var controly14 = 140;
var endx6 = 550;
var endy6 = 120;
var controlx15 = 510;
var controly15 = 150;
var controlx16 = 600;
var controly16 = 170;
var endx7 = 610;
var endy7 = 100;
var controlx17 = 650;
var controly17 = 90;
var controlx18 = 700;
var controly18 = -20;
var endx8 = 550;
var endy8 = 40;
context.beginPath();
context.moveTo(startx1, starty1);
context.bezierCurveTo(controlx11, controly11, controlx12, controly12, endx5, endy5);
//context.moveTo(endx, endy); <-- Nope, only pick up pen once.
context.bezierCurveTo(controlx13, controly13, controlx14, controly14, endx6, endy6);
context.bezierCurveTo(controlx15, controly15, controlx16, controly16, endx7, endy7);
context.bezierCurveTo(controlx17, controly17, controlx18, controly18, endx8, endy8);
context.fillStyle = 'rgb(240,255,255)';
context.fill();
context.stroke();
//Grass 1
context.beginPath();
context.moveTo(10, 600);
context.quadraticCurveTo(10, 550, 20, 550);
context.lineWidth = 10;
context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();
//Grass 2
context.beginPath();
context.moveTo(30, 600);
context.quadraticCurveTo(30, 530, 80, 520);
context.lineWidth = 10;
context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();
// Grass 3
context.beginPath();
context.moveTo(50, 600);
context.quadraticCurveTo(50, 563, 90, 545);
context.lineWidth = 10;
context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();
// Grass 4
context.beginPath();
context.moveTo(500, 600);
context.quadraticCurveTo(490, 570, 510, 550);
context.lineWidth = 10;
context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();
// Grass 5
context.beginPath();
context.moveTo(520, 600);
context.quadraticCurveTo(510, 570, 535, 540);
context.lineWidth = 10;
context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();
// Grass 6
context.beginPath();
context.moveTo(550, 600);
context.quadraticCurveTo(520, 570, 590, 520);
context.lineWidth = 10;
context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();
//Sun
context.beginPath();
context.arc( 800, 0, 130, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 215, 0)';
context.fill();
context.lineWidth = 5;
// Leaf
var startx3 = 178;
var starty3 = 400;
var controlx29 = 270;
var controly29 = 250;
var controlx30 = 400;
var controly30 = 350;
var endx14 = 275;
var endy14 = 377;
context.beginPath();
context.moveTo(startx3, starty3);
context.bezierCurveTo(controlx29, controly29, controlx30, controly30, endx14, endy14);
context.lineWidth = 5;
context.fillStyle = 'rgb(34, 139, 34)';
context.fill();
context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();
var grd = context.createLinearGradient(178, 400, 275, 377);
grd.addColorStop(.9, 'rgb(34, 139, 34)');
grd.addColorStop(.4, 'rgb(0,100,0)');
context.fillStyle = grd;
context.fill();
//Stem
context.beginPath();
context.moveTo(320, 600);
context.quadraticCurveTo(180, 375, 400, 320);
context.lineWidth = 10;
context.strokeStyle = 'rgb(34, 139, 34)';
context.stroke();
// Flower Petals
var startx2 = 400;
var starty2 = 320;
var controlx19 = 440;
var controly19 = 170;
var controlx20 = 470;
var controly20 = 210;
var endx9 = 410;
var endy9 = 330;
var controlx21 = 460;
var controly21 = 318;
var controlx22 = 610;
var controly22 = 320;
var endx10 = 430;
var endy10 = 350;
var controlx23 = 490;
var controly23 = 340;
var controlx24 = 610;
var controly24 = 530;
var endx11 = 410;
var endy11 = 340;
var controlx25 = 425;
var controly25 = 410;
var controlx26 = 370;
var controly26 = 510;
var endx12 = 383;
var endy12 = 330;
var controlx27 = 320;
var controly27 = 300;
var controlx28 = 270;
var controly28 = 240;
var endx13 = 400;
var endy13 = 320;
context.beginPath();
context.moveTo(startx2, starty2);
context.bezierCurveTo(controlx19, controly19, controlx20, controly20, endx9, endy9);
//context.moveTo(endx, endy); <-- Nope, only pick up pen once.
context.bezierCurveTo(controlx21, controly21, controlx22, controly22, endx10, endy10);
context.bezierCurveTo(controlx23, controly23, controlx24, controly24, endx11, endy11);
context.bezierCurveTo(controlx25, controly25, controlx26, controly26, endx12, endy12);
context.bezierCurveTo(controlx27, controly27, controlx28, controly28, endx13, endy13);
context.lineWidth = 5;
context.fillStyle = 'rgb(255,20,147)';
context.fill();
context.strokeStyle = 'rgb(255,20,147)';
context.stroke();
var grd = context.createLinearGradient(370, 290, 545, 320);
grd.addColorStop(.9, 'rgb(255,20,147)');
grd.addColorStop(.5, 'rgb(100,0,0)');
context.fillStyle = grd;
context.fill();
//Flower Center
context.beginPath();
context.arc( 401, 335, 19, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 140, 0)';
context.fill();
context.lineWidth = 5;
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment