!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//pink W
var x= 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 400;
var y2 = 300;
var x3 = 500;
var y3 = 450;
var x4 = 750;
var y4 = 100
//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)//draw line to following point
context. lineTo(x4,y4)// draw line to following point
context.lineCap = 'round';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(355,0,455)'; // or "#FF0876" // 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=850;
var y=200;
var width = 500
var height= 250;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(255,0,0)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(0,255,0)");
//intermediate color
grd.addColorStop(0.5, "rgb(255,0,0)");
// ending color
grd.addColorStop(1, "rgb(0,0,0)");
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
var x1 =50;
var y1 =30;
var x2 =750;
var y2 =30;
var x3= 25;
var y3= 100;
var x4= 300;
var y4= 500;
var rectx3 = 325;
var recty3 = 100;
var rectwidth3 = 150;
var rectheight3 = 150;
var x5= 800;
var y5= 150;
var x6= 550;
var y6= 500;
//light blue line
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.lineWidth = 10;
context.strokeStyle = 'rgb(0,250,250)';
context.lineCap = 'round';
context.stroke();
//dark blue line
context.beginPath();
context.moveTo(x3,y3);
context.lineTo(x4,y4);
context.lineWidth = 15;
context.strokeStyle = 'rgb(0,0,250)';
context.lineCap = 'square';
context.stroke();
//blue square rectangle3
context.beginPath();
context.rect(rectx3,recty3,rectwidth3,rectheight3);
context.lineWidth = 00;
context.strokeStyle = 'rgb(60,70,100)';
context.fill();
context.stroke();
//orange line
context.beginPath();
context.moveTo(x5,y5);
context.lineTo(x6,y6);
context.strokeStyle = 'rgb(255,165,0)';
context.lineCap = 'butt';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1500" height="1000"></canvas>
</body>
</html>
Subscribe to:
Post Comments (Atom)
For this extra credit assignment we had to fully integrate two related or unrelated images or objects. I chose a high heel shoe and a ma...
-
For this project we had to use an image of ourselves and turn it into a doll, placing it in a foreign environment. We used photos... -
For this project we had to create a poster using an image of ourselves and the mesh tool. This project was very fun to do but as... -
For this assignment we had to use the gradient mesh tool to create a pear. I thought it was really interesting experimenting with the me...
No comments:
Post a Comment