Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /** 1. Draw the following graphics using canvas (Picture1.png) **/
- ;(function() {
- var doc = document,
- body = doc.body,
- canvas = doc.createElement('canvas'),
- context = canvas.getContext('2d'),
- PI = Math.PI,
- centerX = 0,
- centerY = 0;
- canvas.width = 600;
- canvas.height = 400;
- body.appendChild(canvas);
- /** draw face **/
- context.save();
- context.translate(150, 245);
- context.beginPath();
- context.arc(centerX, centerY, 80, 0, 2 * PI, false);
- context.restore();
- context.lineWidth = 5;
- context.strokeStyle = '#184a54';
- context.fillStyle = '#90cad7';
- context.stroke();
- context.fill();
- context.closePath();
- /** end draw face **/
- /** draw eyes **/
- context.save();
- context.translate(100, 230);
- context.scale(1.5, 0.8);
- context.beginPath();
- context.arc(centerX, centerY, 12, 0, 2 * PI, false);
- context.closePath();
- context.restore();
- context.lineWidth = 5;
- context.strokeStyle = '#184a54';
- context.fillStyle = '#90cad7';
- context.stroke();
- context.fill();
- context.closePath();
- context.save();
- context.translate(160, 230);
- context.scale(1.5, 0.8);
- context.beginPath();
- context.arc(centerX, centerY, 12, 0, 2 * PI, false);
- context.closePath();
- context.restore();
- context.lineWidth = 5;
- context.strokeStyle = '#184a54';
- context.fillStyle = '#90cad7';
- context.stroke();
- context.fill();
- context.closePath();
- context.save();
- context.beginPath();
- context.translate(95, 230);
- context.rotate(1.52);
- context.scale(1, 0.5);
- context.arc(centerX, centerY, 7, 0, 2 * PI, false);
- context.closePath();
- context.restore();
- context.lineWidth = 5;
- context.strokeStyle = '#184a54';
- context.fillStyle = '#184a54';
- context.stroke();
- context.fill();
- context.closePath();
- context.save();
- context.beginPath();
- context.translate(155, 230);
- context.rotate(1.52);
- context.scale(1, 0.5);
- context.arc(centerX, centerY, 7, 0, 2 * PI, false);
- context.closePath();
- context.restore();
- context.lineWidth = 5;
- context.strokeStyle = '#184a54';
- context.fillStyle = '#184a54';
- context.stroke();
- context.fill();
- context.closePath();
- /** end draw eyes **/
- /** draw nose **/
- context.save();
- context.beginPath();
- context.moveTo(130, 230);
- context.lineTo(110, 275);
- context.restore();
- context.lineWidth = 3;
- context.strokeStyle = '#184a54';
- context.stroke();
- context.closePath();
- context.save();
- context.beginPath();
- context.moveTo(111, 276);
- context.lineTo(130, 276);
- context.restore();
- context.lineWidth = 3;
- context.strokeStyle = '#184a54';
- context.stroke();
- context.closePath();
- /** end draw nose **/
- /** draw mouth **/
- context.save();
- context.beginPath();
- context.translate(135, 300);
- context.rotate(.22);
- context.scale(1, 0.3);
- context.arc(centerX, centerY, 30, 0, 2 * PI, false);
- context.closePath();
- context.restore();
- context.lineWidth = 5;
- context.strokeStyle = '#184a54';
- context.fillStyle = '#90cad7';
- context.stroke();
- context.fill();
- context.closePath();
- /** end draw mouth **/
- /** draw hat cylinder **/
- context.save();
- context.translate(150, 185);
- context.scale(1.5, 0.3);
- context.beginPath();
- context.arc(centerX, centerY, 80, 0, 2 * PI, false);
- context.restore();
- context.lineWidth = 5;
- context.strokeStyle = 'black';
- context.fillStyle = '#396693';
- context.stroke();
- context.fill();
- context.closePath();
- context.beginPath();
- context.save();
- context.moveTo(90, 50);
- context.lineTo(90, 150);
- context.translate(90, 165);
- context.scale(1.5, 0.5);
- context.arc(40, 0, 40, PI, 0, true);
- context.resetTransform();
- context.lineTo(210, 50);
- context.restore();
- context.closePath();
- context.lineWidth = 5;
- context.strokeStyle = 'black';
- context.fillStyle = '#396693';
- context.stroke();
- context.fill();
- context.save();
- context.translate(150, 50);
- context.scale(1.5, 0.5);
- context.beginPath();
- context.arc(centerX, centerY, 40, 0, 2 * PI, false);
- context.restore();
- context.lineWidth = 5;
- context.strokeStyle = 'black';
- context.fillStyle = '#396693';
- context.stroke();
- context.fill();
- context.closePath();
- /** end draw hat cylinder **/
- }());
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement