JavaScript

語言：

JaveScriptBabelCoffeeScript

確定

window.onload = function() {

var darthvader = document.getElementById("darthvader");

var context = darthvader.getContext("2d");

// Mask - base

context.lineJoin = "round";

context.beginPath();

context.moveTo(270, 360);

context.quadraticCurveTo(270, 150, 470, 130);

context.bezierCurveTo(470, 100, 530, 100, 530, 130);

context.quadraticCurveTo(730, 150, 730, 360);

context.quadraticCurveTo(765, 440, 880, 760);

context.quadraticCurveTo(500, 950, 120, 760);

context.quadraticCurveTo(250, 380, 270, 360);

context.closePath();

context.lineWidth = 10;

context.strokeStyle = "#230000";

context.fillStyle = "#2d1821";

context.stroke();

context.fill();

context.save();

context.clip();

// helm bg back

context.beginPath();

context.moveTo(320, 600);

context.quadraticCurveTo(190, 750, 500, 880);

context.quadraticCurveTo(810, 750, 680, 600);

context.closePath();

context.fillStyle = "#30222f";

context.fill();

// helm bg face shadow left

context.beginPath();

context.moveTo(300, 565);

context.lineTo(345, 740);

context.lineTo(470, 825);

context.lineTo(500, 810);

context.closePath();

context.fillStyle = "#230d22";

context.fill();

// helm bg face shadow right

context.beginPath();

context.moveTo(700, 565);

context.lineTo(660, 705);

context.lineTo(630, 730);

context.lineTo(600, 650);

context.closePath();

context.fill();

// helm bg left

context.beginPath();

context.moveTo(240, 620);

context.quadraticCurveTo(130, 740, 360, 880);

context.lineTo(100, 880);

context.lineTo(100, 620);

context.closePath();

context.fillStyle = "#291016";

context.fill();

// helm bg right

context.beginPath();

context.moveTo(760, 620);

context.quadraticCurveTo(870, 740, 640, 880);

context.lineTo(900, 880);

context.lineTo(900, 620);

context.closePath();

context.fill();

context.beginPath();

context.arc(316, 496, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#4a4152";

context.fill();

context.beginPath();

context.arc(304, 508, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(304, 520, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(304, 532, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#200f15";

context.fill();

context.beginPath();

context.arc(292, 640, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#4a4152";

context.fill();

context.beginPath();

context.arc(292, 652, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(304, 652, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(304, 664, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(328, 724, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(328, 736, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(328, 748, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(340, 748, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(340, 760, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(364, 760, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(364, 772, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(364, 796, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(708, 640, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#200f15";

context.fill();

context.beginPath();

context.arc(708, 652, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(696, 652, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(696, 664, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(672, 712, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(672, 724, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(600, 760, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(600, 772, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(588, 772, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(588, 784, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(576, 784, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(576, 772, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(576, 796, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(564, 796, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(564, 808, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(564, 832, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(636, 760, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(636, 772, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(636, 796, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

// helm side left

context.beginPath();

context.moveTo(240, 813);

context.quadraticCurveTo(120, 750, 176, 750);

context.lineTo(291, 500);

context.quadraticCurveTo(295, 370, 385, 395);

context.lineTo(200, 200);

context.lineTo(100, 900);

context.closePath();

context.fillStyle = "#2f3447";

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(350, 370);

context.quadraticCurveTo(265, 380, 260, 480);

context.lineTo(210, 620);

context.lineTo(150, 720);

context.lineTo(170, 740);

context.closePath();

context.fillStyle = "#454f68";

context.fill();

context.beginPath();

context.moveTo(200, 490);

context.quadraticCurveTo(220, 465, 250, 465);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(200, 505);

context.quadraticCurveTo(220, 480, 265, 480);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(160, 625);

context.quadraticCurveTo(200, 600, 240, 610);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(165, 705);

context.quadraticCurveTo(175, 700, 185, 705);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.arc(296, 390, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.arc(296, 402, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(284, 402, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(284, 414, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(240, 496, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(240, 508, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(228, 508, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(228, 520, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(182, 690, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.restore();

// helm side right

context.beginPath();

context.moveTo(760, 813);

context.quadraticCurveTo(880, 750, 824, 750);

context.lineTo(709, 500);

context.quadraticCurveTo(705, 370, 615, 395);

context.lineTo(800, 200);

context.lineTo(900, 900);

context.closePath();

context.fillStyle = "#2f3447";

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(650, 370);

context.quadraticCurveTo(735, 380, 740, 480);

context.lineTo(790, 620);

context.lineTo(850, 720);

context.lineTo(830, 740);

context.closePath();

context.fillStyle = "#454f68";

context.fill();

context.beginPath();

context.moveTo(700, 475);

context.quadraticCurveTo(730, 465, 760, 480);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.arc(768, 484, 3, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.moveTo(840, 625);

context.quadraticCurveTo(800, 600, 760, 610);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(835, 705);

context.quadraticCurveTo(815, 700, 815, 705);

context.lineWidth = 5;

context.stroke();

context.restore();

// helm top highlight left

context.beginPath();

context.moveTo(250, 350);

context.lineTo(470, 420);

context.lineTo(470, 100);

context.lineTo(250, 100);

context.closePath();

context.fillStyle = "#d6deeb";

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(290, 360);

context.quadraticCurveTo(270, 180, 470, 150);

context.lineTo(470, 260);

context.quadraticCurveTo(400, 250, 390, 340);

context.quadraticCurveTo(320, 320, 290, 360);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(290, 360);

context.quadraticCurveTo(270, 180, 400, 160);

context.lineTo(420, 180);

context.lineTo(470, 180);

context.lineTo(470, 250);

context.quadraticCurveTo(335, 200, 360, 360);

context.closePath();

context.fillStyle = "#525e74";

context.fill();

context.restore();

context.beginPath();

context.arc(454, 212, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#d6deeb";

context.fill();

context.beginPath();

context.arc(454, 224, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(442, 224, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(442, 252, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(454, 252, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.arc(454, 264, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(292, 264, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(282, 308, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(282, 320, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(294, 320, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(282, 332, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(454, 360, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(454, 372, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.restore();

// helm top highlight right

context.beginPath();

context.moveTo(750, 350);

context.lineTo(530, 420);

context.lineTo(530, 100);

context.lineTo(750, 100);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(730, 360);

context.quadraticCurveTo(740, 300, 680, 220);

context.quadraticCurveTo(580, 220, 530, 160);

context.lineTo(530, 410);

context.closePath();

context.fillStyle = "#53637d";

context.fill();

context.beginPath();

context.moveTo(530, 130);

context.lineTo(530, 410);

context.quadraticCurveTo(580, 350, 640, 330);

context.quadraticCurveTo(630, 280, 580, 280);

context.quadraticCurveTo(545, 280, 545, 150);

context.closePath();

context.fillStyle = "#454f68";

context.fill();

context.beginPath();

context.arc(546, 148, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.arc(546, 160, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(546, 196, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(624, 312, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.beginPath();

context.arc(636, 312, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.arc(636, 324, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(570, 342, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.beginPath();

context.arc(570, 354, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(558, 354, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(582, 366, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.arc(570, 366, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(558, 366, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.beginPath();

context.arc(546, 378, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.arc(558, 378, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(546, 390, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.restore();

context.restore();

// Mask - inner side left

context.beginPath();

context.moveTo(369, 387);

context.quadraticCurveTo(290, 360, 280, 500);

context.lineTo(170, 740);

context.quadraticCurveTo(100, 750, 240, 813);

context.quadraticCurveTo(120, 750, 176, 750);

context.lineTo(291, 500);

context.quadraticCurveTo(295, 370, 385, 395);

context.lineWidth = 5;

context.fillStyle = "#7489a6";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(280, 500);

context.lineTo(291, 500);

context.lineWidth = 3;

context.stroke();

context.beginPath();

context.moveTo(170, 740);

context.lineTo(176, 750);

context.lineWidth = 3;

context.stroke();

context.restore();

// Mask - inner side right

context.beginPath();

context.moveTo(631, 387);

context.quadraticCurveTo(710, 360, 720, 500);

context.lineTo(830, 740);

context.quadraticCurveTo(900, 750, 760, 813);

context.quadraticCurveTo(880, 750, 824, 750);

context.lineTo(709, 500);

context.quadraticCurveTo(705, 370, 615, 395);

context.lineWidth = 5;

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(720, 500);

context.lineTo(709, 500);

context.lineWidth = 4;

context.stroke();

context.beginPath();

context.moveTo(830, 740);

context.lineTo(824, 750);

context.lineWidth = 3;

context.stroke();

context.restore();

// Mask - chic left

context.beginPath();

context.moveTo(470, 490);

context.lineTo(350, 500);

context.quadraticCurveTo(330, 540, 300, 570);

context.quadraticCurveTo(350, 620, 370, 730);

context.quadraticCurveTo(500, 680, 470, 490);

context.closePath();

context.lineWidth = 10;

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(480, 485);

context.quadraticCurveTo(410, 550, 430, 600);

context.lineTo(372, 650);

context.lineTo(372, 720);

context.lineTo(480, 580);

context.closePath();

context.fillStyle = "#525e74";

context.fill();

context.beginPath();

context.moveTo(320, 545);

context.quadraticCurveTo(356, 570, 356, 630);

context.lineTo(280, 570);

context.closePath();

context.fill();

context.beginPath();

context.arc(326, 574, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.arc(326, 586, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(338, 586, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(374, 586, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#d6deeb";

context.fill();

context.beginPath();

context.arc(374, 598, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(338, 598, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.arc(386, 646, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(386, 658, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.restore();

// Mask - chic left detail

context.beginPath();

context.moveTo(298, 570);

context.quadraticCurveTo(360, 640, 375, 650);

context.lineTo(375, 730);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(375, 650);

context.quadraticCurveTo(430, 610, 475, 550);

context.lineWidth = 5;

context.stroke();

// Mask - chic right

context.beginPath();

context.moveTo(530, 490);

context.lineTo(650, 500);

context.quadraticCurveTo(670, 540, 700, 570);

context.quadraticCurveTo(650, 620, 630, 730);

context.quadraticCurveTo(500, 680, 530, 490);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#525e74";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(680, 545);

context.quadraticCurveTo(644, 570, 644, 630);

context.lineTo(720, 570);

context.closePath();

context.fillStyle = "#2f3447";

context.fill();

context.beginPath();

context.arc(536, 504, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.arc(548, 516, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(536, 516, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(536, 528, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(596, 540, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#d6deeb";

context.fill();

context.beginPath();

context.arc(608, 540, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(620, 540, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(608, 552, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(536, 574, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.arc(536, 586, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(548, 586, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(548, 598, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(560, 622, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.restore();

// Mask - chic right detail

context.beginPath();

context.moveTo(702, 570);

context.quadraticCurveTo(640, 640, 625, 650);

context.lineTo(625, 730);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(625, 650);

context.quadraticCurveTo(570, 610, 525, 550);

context.lineWidth = 5;

context.stroke();

// Mask - Eyes left

context.beginPath();

context.moveTo(470, 490);

context.quadraticCurveTo(400, 530, 340, 500);

context.quadraticCurveTo(320, 420, 470, 430);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#314085";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(360, 440);

context.quadraticCurveTo(375, 510, 420, 530);

context.quadraticCurveTo(390, 475, 420, 415);

context.closePath();

context.fillStyle = "#58b1ed";

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(360, 440);

context.quadraticCurveTo(360, 475, 370, 470);

context.lineTo(390, 470);

context.lineTo(390, 420);

context.closePath();

context.fillStyle = "#466eb4";

context.fill();

context.beginPath();

context.moveTo(383, 475);

context.lineTo(383, 450);

context.lineWidth = 5;

context.strokeStyle = "#58b1ed";

context.stroke();

context.restore();

context.beginPath();

context.arc(438, 448, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(438, 460, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(450, 460, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(450, 472, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#fff";

context.fill();

context.restore();

// Mask - Eyes left detail top back

context.beginPath();

context.moveTo(435, 425);

context.quadraticCurveTo(325, 420, 350, 505);

context.lineTo(335, 510);

context.quadraticCurveTo(280, 410, 385, 395);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#d6deeb";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(385, 395);

context.quadraticCurveTo(300, 420, 350, 510);

context.lineTo(420, 510);

context.lineTo(420, 395);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.restore();

// Mask - Eyes left detail top

context.beginPath();

context.moveTo(435, 425);

context.quadraticCurveTo(325, 420, 350, 505);

context.lineTo(350, 510);

context.quadraticCurveTo(310, 420, 410, 415);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#2f3447";

context.stroke();

context.fill();

// Mask - Eyes left detail bottom

context.beginPath();

context.moveTo(470, 480);

context.quadraticCurveTo(400, 530, 340, 490);

context.lineTo(320, 510);

context.quadraticCurveTo(410, 555, 470, 490);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#7489a6";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(470, 480);

context.quadraticCurveTo(400, 530, 340, 490);

context.lineTo(320, 495);

context.quadraticCurveTo(395, 535, 460, 490);

context.closePath();

context.fillStyle = "#d6deeb";

context.fill();

context.restore();

// Mask - Eyes right

context.beginPath();

context.moveTo(530, 490);

context.quadraticCurveTo(600, 530, 660, 500);

context.quadraticCurveTo(680, 420, 530, 430);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#314085";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(580, 470);

context.lineTo(580, 530);

context.lineTo(620, 530);

context.quadraticCurveTo(605, 500, 615, 470);

context.closePath();

context.fillStyle = "#58b1ed";

context.fill();

context.beginPath();

context.moveTo(596, 475);

context.lineTo(610, 475);

context.lineWidth = 5;

context.strokeStyle = "#466eb4";

context.stroke();

context.beginPath();

context.moveTo(585, 472);

context.lineTo(585, 495);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(589, 472);

context.lineTo(589, 490);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.arc(570, 470, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.beginPath();

context.arc(570, 482, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.restore();

// Mask - Eyes right detail top back

context.beginPath();

context.moveTo(565, 425);

context.quadraticCurveTo(675, 420, 650, 505);

context.lineTo(665, 510);

context.quadraticCurveTo(720, 410, 615, 395);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#7489a6";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(615, 395);

context.quadraticCurveTo(700, 420, 650, 510);

context.lineTo(580, 510);

context.lineTo(580, 395);

context.closePath();

context.fillStyle = "#525e74";

context.fill();

context.restore();

// Mask - Eyes right detail top

context.beginPath();

context.moveTo(565, 425);

context.quadraticCurveTo(675, 420, 650, 505);

context.lineTo(650, 510);

context.quadraticCurveTo(690, 420, 590, 415);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#2f3447";

context.stroke();

context.fill();

// Mask - Eyes right detail bottom

context.beginPath();

context.moveTo(530, 480);

context.quadraticCurveTo(600, 530, 660, 490);

context.lineTo(680, 510);

context.quadraticCurveTo(590, 555, 530, 490);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#7489a6";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(530, 480);

context.quadraticCurveTo(600, 530, 660, 490);

context.lineTo(680, 495);

context.quadraticCurveTo(605, 535, 540, 490);

context.closePath();

context.fillStyle = "#454f68";

context.fill();

context.restore();

// Mask - sopraciglia left

context.lineJoin = "miter";

context.beginPath();

context.moveTo(470, 420);

context.quadraticCurveTo(270, 250, 228, 450);

context.quadraticCurveTo(290, 300, 470, 450);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#d6deeb";

context.stroke();

context.fill();

// Clip for hightlight

context.save();

context.clip();

context.beginPath();

context.moveTo(500, 450);

context.quadraticCurveTo(270, 260, 228, 450);

context.lineTo(500, 450);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(500, 450);

context.quadraticCurveTo(270, 260, 228, 450);

context.quadraticCurveTo(270, 260, 500, 470);

context.closePath();

context.fillStyle = "#525e74";

context.fill();

context.restore();

context.beginPath();

context.moveTo(300, 380);

context.quadraticCurveTo(290, 350, 315, 340);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(420, 378);

context.quadraticCurveTo(445, 400, 445, 415);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(310, 380);

context.quadraticCurveTo(310, 355, 325, 350);

context.lineWidth = 5;

context.stroke();

context.restore();

// Mask - sopraciglia right

context.beginPath();

context.moveTo(530, 420);

context.quadraticCurveTo(730, 250, 768, 450);

context.quadraticCurveTo(710, 300, 530, 450);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#7489a6";

context.stroke();

context.fill();

// Clip for hightlight

context.save();

context.clip();

context.beginPath();

context.moveTo(500, 450);

context.quadraticCurveTo(730, 260, 772, 450);

context.lineTo(500, 450);

context.closePath();

context.fillStyle = "#525e74";

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(500, 450);

context.quadraticCurveTo(730, 260, 772, 450);

context.quadraticCurveTo(730, 260, 500, 470);

context.closePath();

context.fillStyle = "#454f68";

context.fill();

context.restore();

context.beginPath();

context.moveTo(700, 380);

context.quadraticCurveTo(710, 350, 675, 340);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(580, 378);

context.quadraticCurveTo(555, 400, 555, 415);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(690, 380);

context.quadraticCurveTo(690, 355, 675, 350);

context.lineWidth = 5;

context.stroke();

context.restore();

// Mask - middle

context.lineJoin = "round";

context.beginPath();

context.moveTo(470, 130);

context.bezierCurveTo(470, 100, 530, 100, 530, 130);

context.lineTo(530, 430);

context.bezierCurveTo(530, 460, 470, 460, 470, 430);

context.lineTo(470, 430);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#d6deeb";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(470, 150);

context.lineTo(470, 330);

context.quadraticCurveTo(500, 330, 490, 480);

context.lineTo(530, 480);

context.lineTo(530, 150);

context.arc(500, 150, 30, 0, Math.PI, true);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(485, 400);

context.lineTo(485, 480);

context.lineTo(530, 480);

context.lineTo(530, 100);

context.lineTo(470, 100);

context.lineTo(470, 200);

context.quadraticCurveTo(485, 200, 485, 260);

context.quadraticCurveTo(485, 320, 510, 320);

context.lineTo(510, 360);

context.quadraticCurveTo(510, 400, 485, 400);

context.closePath();

context.fillStyle = "#53637d";

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(510, 480);

context.lineTo(530, 480);

context.lineTo(530, 160);

context.quadraticCurveTo(510, 160, 510, 180);

context.lineTo(510, 200);

context.quadraticCurveTo(525, 200, 525, 300);

context.lineTo(525, 400);

context.quadraticCurveTo(525, 480, 510, 480);

context.closePath();

context.fillStyle = "#454f68";

context.fill();

context.restore();

context.restore();

context.beginPath();

context.moveTo(470, 145);

context.lineTo(490, 145);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(470, 160);

context.lineTo(500, 160);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(470, 200);

context.lineTo(480, 200);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(470, 360);

context.lineTo(480, 360);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(470, 375);

context.lineTo(480, 375);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.arc(520, 426, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#230000";

context.fill();

context.beginPath();

context.arc(520, 438, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.restore();

// Mask - nose mid

context.beginPath();

context.moveTo(470, 452);

context.quadraticCurveTo(480, 500, 474, 550);

context.lineTo(526, 550);

context.quadraticCurveTo(520, 500, 530, 452);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#d6deeb";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(490, 460);

context.lineTo(490, 474);

context.lineTo(495, 474);

context.lineTo(495, 488);

context.lineTo(500, 488);

context.lineTo(500, 505);

context.lineTo(510, 505);

context.lineTo(510, 530);

context.lineTo(540, 530);

context.lineTo(540, 460);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.beginPath();

context.moveTo(510, 460);

context.lineTo(510, 474);

context.lineTo(515, 474);

context.lineTo(515, 492);

context.lineTo(518, 492);

context.lineTo(518, 510);

context.lineTo(520, 510);

context.lineTo(520, 530);

context.lineTo(540, 530);

context.lineTo(540, 460);

context.closePath();

context.fillStyle = "#454f68";

context.fill();

context.restore();

// Mask - triangle external bottom

context.lineJoin = "round";

context.beginPath();

context.moveTo(370, 730);

context.lineTo(630, 730);

context.lineTo(500, 820);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#525e74";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(370, 730);

context.lineTo(370, 820);

context.lineTo(500, 880);

context.lineTo(420, 730);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.beginPath();

context.moveTo(470, 730);

context.lineTo(560, 880);

context.lineTo(630, 880);

context.lineTo(630, 730);

context.closePath();

context.fillStyle = "#2f3447";

context.fill();

context.restore();

// Mask - triangle inner clip() bottom

context.beginPath();

context.moveTo(410, 745);

context.lineTo(590, 745);

context.lineTo(500, 805);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#7489a6";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(400, 770);

context.lineTo(400, 810);

context.lineTo(600, 810);

context.lineTo(600, 770);

context.closePath();

context.fillStyle = "#525e74";

context.fill();

context.beginPath();

context.moveTo(415, 730);

context.lineTo(450, 810);

context.lineWidth = 5;

context.strokeStyle = "#230000";

context.stroke();

context.beginPath();

context.moveTo(435, 730);

context.lineTo(465, 810);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(455, 730);

context.lineTo(475, 810);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(475, 730);

context.lineTo(485, 810);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(490, 730);

context.lineTo(495, 810);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(510, 730);

context.lineTo(505, 810);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(525, 730);

context.lineTo(515, 810);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(545, 730);

context.lineTo(525, 810);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(565, 730);

context.lineTo(535, 810);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(585, 730);

context.lineTo(550, 810);

context.lineWidth = 5;

context.stroke();

context.restore();

// Mask - triangle external

context.beginPath();

context.moveTo(370, 730);

context.lineTo(630, 730);

context.lineTo(500, 560);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#525e74";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(380, 560);

context.lineTo(470, 730);

context.lineTo(630, 730);

context.lineTo(630, 560);

context.closePath();

context.fillStyle = "#2f3447";

context.fill();

context.restore();

// Mask - triangle inner clip()

context.beginPath();

context.moveTo(390, 720);

context.lineTo(610, 720);

context.lineTo(500, 580);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#7489a6";

context.stroke();

context.fill();

context.save();

context.clip();

// Mask - triangle inner masked

context.beginPath();

context.moveTo(430, 700);

context.lineTo(570, 700);

context.lineTo(570, 500);

context.lineTo(430, 500);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#d6deeb";

context.stroke();

context.fill();

context.beginPath();

context.moveTo(430, 500);

context.lineTo(430, 655);

context.lineTo(440, 655);

context.lineTo(440, 660);

context.lineTo(455, 660);

context.lineTo(455, 665);

context.lineTo(470, 665);

context.lineTo(470, 675);

context.lineTo(486, 675);

context.lineTo(486, 680);

context.lineTo(530, 680);

context.lineTo(530, 675);

context.lineTo(545, 675);

context.lineTo(545, 670);

context.lineTo(560, 670);

context.lineTo(560, 665);

context.lineTo(570, 665);

context.lineTo(570, 500);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.beginPath();

context.moveTo(430, 500);

context.lineTo(430, 645);

context.lineTo(440, 645);

context.lineTo(440, 650);

context.lineTo(455, 650);

context.lineTo(455, 655);

context.lineTo(470, 655);

context.lineTo(470, 660);

context.lineTo(486, 660);

context.lineTo(486, 645);

context.lineTo(530, 645);

context.lineTo(530, 635);

context.lineTo(545, 635);

context.lineTo(545, 625);

context.lineTo(560, 625);

context.lineTo(560, 615);

context.lineTo(570, 615);

context.lineTo(570, 500);

context.closePath();

context.fillStyle = "#525e74";

context.fill();

context.beginPath();

context.moveTo(440, 700);

context.lineTo(440, 500);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(455, 700);

context.lineTo(455, 500);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(470, 700);

context.lineTo(470, 500);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(481, 615);

context.lineTo(481, 500);

context.lineWidth = 5;

context.strokeStyle = "#2f3447";

context.stroke();

context.beginPath();

context.moveTo(486, 700);

context.lineTo(486, 500);

context.lineWidth = 5;

context.strokeStyle = "#230000";

context.stroke();

context.beginPath();

context.moveTo(509, 625);

context.lineTo(509, 500);

context.lineWidth = 5;

context.strokeStyle = "#2f3447";

context.stroke();

context.beginPath();

context.moveTo(514, 700);

context.lineTo(514, 500);

context.lineWidth = 5;

context.strokeStyle = "#230000";

context.stroke();

context.beginPath();

context.moveTo(525, 640);

context.lineTo(525, 500);

context.lineWidth = 5;

context.strokeStyle = "#2f3447";

context.stroke();

context.beginPath();

context.moveTo(530, 700);

context.lineTo(530, 500);

context.lineWidth = 5;

context.strokeStyle = "#230000";

context.stroke();

context.beginPath();

context.moveTo(540, 655);

context.lineTo(540, 500);

context.lineWidth = 5;

context.strokeStyle = "#2f3447";

context.stroke();

context.beginPath();

context.moveTo(545, 700);

context.lineTo(545, 500);

context.lineWidth = 5;

context.strokeStyle = "#230000";

context.stroke();

context.beginPath();

context.moveTo(555, 675);

context.lineTo(555, 500);

context.lineWidth = 5;

context.strokeStyle = "#2f3447";

context.stroke();

context.beginPath();

context.moveTo(560, 700);

context.lineTo(560, 500);

context.lineWidth = 5;

context.strokeStyle = "#230000";

context.stroke();

context.beginPath();

context.moveTo(569, 700);

context.lineTo(569, 500);

context.lineWidth = 5;

context.strokeStyle = "#2f3447";

context.stroke();

context.restore();

// Mask - nose top

context.beginPath();

context.moveTo(465, 452);

context.bezierCurveTo(465, 465, 535, 465, 535, 452);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#d6deeb";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(500, 452);

context.lineTo(500, 465);

context.lineTo(540, 465);

context.lineTo(540, 452);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.beginPath();

context.moveTo(520, 452);

context.lineTo(520, 465);

context.lineTo(540, 465);

context.lineTo(540, 452);

context.closePath();

context.fillStyle = "#454f68";

context.fill();

context.restore();

// Mask - nose external

context.beginPath();

context.arc(500, 550, 26, 0, Math.PI, true);

context.lineTo(474, 580);

context.lineTo(526, 580);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#7489a6";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(535, 510);

context.lineTo(465, 590);

context.lineTo(535, 590);

context.closePath();

context.fillStyle = "#454f68";

context.fill();

context.restore();

// Mask - nose

context.lineJoin = "round";

context.beginPath();

context.arc(500, 550, 14, 0, Math.PI, true);

context.lineTo(486, 570);

context.lineTo(514, 570);

context.closePath();

context.lineWidth = 10;

context.fillStyle = "#d6deeb";

context.stroke();

context.fill();

context.save();

context.clip();

context.beginPath();

context.moveTo(530, 530);

context.quadraticCurveTo(485, 530, 495, 600);

context.lineTo(530, 600);

context.closePath();

context.fillStyle = "#7489a6";

context.fill();

context.beginPath();

context.arc(508, 550, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fillStyle = "#d6deeb";

context.fill();

context.beginPath();

context.arc(508, 562, 4, 0, 2 * Math.PI, true);

context.closePath();

context.fill();

context.restore();

// Mask - nose detail

context.beginPath();

context.arc(500, 500, 27, 0, Math.PI, true);

context.lineWidth = 4;

context.stroke();

context.beginPath();

context.arc(500, 515, 27, 0, Math.PI, true);

context.lineWidth = 4;

context.stroke();

context.beginPath();

context.arc(500, 530, 27, 0, Math.PI, true);

context.lineWidth = 4;

context.stroke();

// Mask - line circle back left

context.beginPath();

context.moveTo(366, 740);

context.lineTo(310, 680);

context.lineWidth = 5;

context.strokeStyle = "#200f15";

context.stroke();

context.beginPath();

context.moveTo(366, 730);

context.lineTo(310, 670);

context.lineWidth = 5;

context.strokeStyle = "#7489a6";

context.stroke();

// Mask - line circle back right

context.beginPath();

context.moveTo(634, 740);

context.lineTo(690, 680);

context.lineWidth = 5;

context.strokeStyle = "#200f15";

context.stroke();

context.beginPath();

context.moveTo(634, 730);

context.lineTo(690, 670);

context.lineWidth = 5;

context.strokeStyle = "#7489a6";

context.stroke();

// Mask - triangle circle left

context.beginPath();

context.arc(366, 730, 8, 0, 2 * Math.PI, true);

context.closePath();

context.lineWidth = 10;

context.strokeStyle = "#230000";

context.stroke();

context.fill();

// Mask - triangle circle right

context.beginPath();

context.arc(634, 730, 8, 0, 2 * Math.PI, true);

context.closePath();

context.lineWidth = 10;

context.stroke();

context.fill();

};

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的头像星球html,HTML5 Canvas 星球大战黑武士头像的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。