This post contains examples of HTML circles, arcs, radial gradients, and ellipses.
TEXT
BELOW = A PINK CIRCLE WITH A BLACK BORDER CENTERED ON THE CANVAS
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var centerX = 400;
var centerY = 300;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#FFD1FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
,,,,,,,,,, DO NOT COPY THESE DOTS
TEXT BELOW - TOP HALF OF A CIRCLE FILLED WITH GREEN AND A BLACK BORDER
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = BOTTOM HALF OF A CIRCLE WITH A GREEN FILL AND BLACK BORDER
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = Math.PI;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = RIGHT-HAND HALF OF A CIRCLE WITH A GREEN FILL AND BLACK BORDER
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = 0.5 * Math.PI;
var endangle = 1.5 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = LEFT -HAND HALF FO A CIRCLE WITH A GREEN FILL AND BLACK BORDER
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = 0.5 * Math.PI;
var endangle = 1.5 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = SMALL ARC ON THE RIGHT-HAND SIDE OF CIRCLE
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = 0.25 * Math.PI;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = LARGE ARC ON THE LEFT-HAND SIDE OF A CIRCLE WITH A GREEN FILL AND BLACK BORDER
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = 0.25 * Math.PI;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = A CIRCLE WITH A RADIAL GRADIENT GOING FROM AN INNER BLACK TO AN OUTER RED WITH A BLACK BORDER
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 200);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = CIRCLE WITH A YELLOW GRADIENT FADING TO WHITE BACKGROUND
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////////////////////////////////////////////////////
var centerX = 300;
var centerY = 200;
var radius = 200;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 200);
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = BEZIER CURVES
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
////Arms
// starting point coordinates
var startX = canvas.width/4.4;
var startY = canvas.height/1.2;
// ending point coordinates
var endX = canvas.width-75;
var endY = canvas.height/1.2;
// control point coordinates ( magnet )
var cpoint1X = canvas.width*.9;
var cpoint1Y = canvas.height*1;
// control point coordinates ( magnet )
var cpoint2X = canvas.width / 3;
var cpoint2Y = canvas.height / 2 + 200;
//// DRAW THE BEZIER CURVE
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpoint1X, cpoint1Y, cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 19;
context.strokeStyle = "rgb(120, 80, 80)";
context.lineCap = "round";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = ELLIPSE (OVAL)
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var centerX = 0;
var centerY = 0;
var radius = 50;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 1);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment