dreamweaver project 1
https://www.youtube.com/watch?v=83L6B13ixQ0
https://www.youtube.com/watch?v=3GqUM4mEYKA
https://www.youtube.com/watch?v=SNHHUmDWltU
code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Simple V line in pink
var x= 50;
var y = 70;
var x1 = 200;
var y1 = 350;
var x2 = 250;
var y2 = 300;
var x3 = 300;
var y3 = 350;
var x4 = 350
var y4 = 70
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineTo(x3, y3);
context.lineTo(x4,y4)
context.lineCap = 'round';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255,0,255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x= 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 300;
var y2 = 300
var x3 = 450;
var y3 = 450;
var x4 = 500
var y4 = 50;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(1, 1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineTo(x3, y3)
context.lineTo(x3, y4)
context.lineTo(x4, y4)
context.lineCap = 'round';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(0,0,255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x= 50;
var y = 400;
var x1 = 300;
var y1 = 450;
var x2 = 400;
var y2 = 300
var x3 = 450;
var y3 = 450;
var x4 = 500
var y4 = 50;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(1, 300); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineTo(x3, y3)
context.lineTo(x3, y4)
context.lineTo(x4, y4)
context.lineCap = 'round';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(173,255,47)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x= 100;
var y = 400;
var x1 = 150;
var y1 = 450;
var x2 = 300;
var y2 = 300
context.beginPath();
context.moveTo(x, y);
context.lineTo(200, 2); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineCap = 'round';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255,255,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
var x=300;
var y=400;
var width = 100
var height= 50;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(255,182,193)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(127,255,212)");
//intermediate color
grd.addColorStop(0.3, "rgb(0,255,255)");
// ending color
grd.addColorStop(.7, "rgb(100,149,200)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
//new rectangle 1
var x=300;
var y=50;
var width = 100
var height= 200;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(178,34,34)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(255,69,0)");
//intermediate color
grd.addColorStop(0.3, "rgb(128,0,128)");
// ending color
grd.addColorStop(.7, "rgb(100,149,200)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//solid square
var x=20;
var y=50;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(147,112,219)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(147,112,219)");
//intermediate color
grd.addColorStop(0.3, "rgb(147,112,219)");
// ending color
grd.addColorStop(.7, "rgb(147,112,219)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment