Kenzie's Corner
Tuesday, May 2, 2017
Monday, April 17, 2017
Monday, April 10, 2017
Wednesday, March 29, 2017
Monday, March 27, 2017
Wednesday, March 15, 2017
HTML Code
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//green circle
context.beginPath();
context.arc(400, 300, 200, 0, 2*Math.PI, false); //context.arc(centerx, centerY, radius, 0, 2*Math.PI, false);
context.closePath();
context.fillStyle = "rgb(80, 216, 80)";
context.fill();
//top black line
context.beginPath();
context.moveTo(260, 235);
context.quadraticCurveTo(430, 180, 545, 265); //context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 36;
context.lineCap = "round";
context.stroke();
//middle black line
context.beginPath();
context.moveTo(280, 295);
context.quadraticCurveTo(410, 240, 515, 318); //context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 28;
context.lineCap = "round";
context.stroke();
//bottom black line
context.beginPath();
context.moveTo(308, 353);
context.quadraticCurveTo(408, 315, 477, 365); //context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 23;
context.lineCap = "round";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//green circle
context.beginPath();
context.arc(400, 300, 200, 0, 2*Math.PI, false); //context.arc(centerx, centerY, radius, 0, 2*Math.PI, false);
context.closePath();
context.fillStyle = "rgb(80, 216, 80)";
context.fill();
//top black line
context.beginPath();
context.moveTo(260, 235);
context.quadraticCurveTo(430, 180, 545, 265); //context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 36;
context.lineCap = "round";
context.stroke();
//middle black line
context.beginPath();
context.moveTo(280, 295);
context.quadraticCurveTo(410, 240, 515, 318); //context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 28;
context.lineCap = "round";
context.stroke();
//bottom black line
context.beginPath();
context.moveTo(308, 353);
context.quadraticCurveTo(408, 315, 477, 365); //context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 23;
context.lineCap = "round";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)