前言
摸鱼搞代码，希望每天进步一点
canvas
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.ellipse(400, 400, 150, 160, 0, 0, Math.PI);
ctx.ellipse(400, 310, 160, 150, 0, Math.PI, Math.PI * 2);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(300, 190, 20, Math.PI, Math.PI * 2);
ctx.fillRect(280, 190, 40, 40);
ctx.arc(500, 190, 20, Math.PI, Math.PI * 2);
ctx.fillRect(480, 190, 40, 40);
ctx.fill();
ctx.closePath();
脚
ctx.beginPath();
ctx.moveTo(300, 523);
ctx.bezierCurveTo(315, 523, 290, 583, 300, 603);
ctx.quadraticCurveTo(325, 613, 370, 603);
ctx.quadraticCurveTo(360, 584, 370, 556);
ctx.quadraticCurveTo(325, 523, 300, 520);
ctx.stroke();
ctx.fillStyle = "#000";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(440, 554);
ctx.quadraticCurveTo(445, 575, 438, 600);
ctx.quadraticCurveTo(465, 610, 510, 600);
ctx.bezierCurveTo(495, 575, 515, 545, 505, 514);
ctx.quadraticCurveTo(470, 546, 440, 553);
ctx.fillStyle = "#000";
ctx.fill();
ctx.closePath();
手
ctx.beginPath();
ctx.moveTo(250, 400);
ctx.quadraticCurveTo(245, 330, 241, 300);
ctx.quadraticCurveTo(200, 320, 160, 420);
ctx.lineTo(230, 420);
ctx.quadraticCurveTo(245, 400, 250, 400);
ctx.fillStyle = "#000";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(195, 420, 35, 0, Math.PI);
ctx.fillStyle = "#000";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(559, 300);
ctx.quadraticCurveTo(575, 295, 600, 250);
ctx.quadraticCurveTo(625, 230, 655, 250);
ctx.quadraticCurveTo(680, 330, 550, 400);
ctx.quadraticCurveTo(556, 340, 559, 300);
ctx.fillStyle = "#000";
ctx.fill();
ctx.closePath();
let get_arr = function(a, len) {
let arr = [];
for (let i = 0; i < len; i++) {
let step = (i / len) * (Math.PI * 2);
let vector = {
x: a * (16 * Math.pow(Math.sin(step), 3)) + 625,
y:
-a *
(13 * Math.cos(step) -
5 * Math.cos(2 * step) -
2 * Math.cos(3 * step) -
Math.cos(4 * step)) +
275
};
arr.push(vector);
}
return arr;
};
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
let len = 50;
let arr = get_arr(1, 50);
for (let i = 0; i < len; i++) {
ctx.lineTo(arr[i].x, arr[i].y);
}
ctx.fillStyle = "#f00";
ctx.fill();
ctx.closePath();
彩虹🌈圈
ctx.beginPath();
ctx.ellipse(400, 300, 125, 95, -0.06, 0, Math.PI * 2);
var grd = ctx.createRadialGradient(400, 300, 95, 400, 300, 130);
grd.addColorStop(0, "#dddddd20");
grd.addColorStop(1, "#0000FF");
ctx.strokeStyle = grd;
ctx.lineWidth = 6;
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.ellipse(400, 300, 130, 95, -0.12, 0, Math.PI * 2);
var grd = ctx.createRadialGradient(400, 300, 95, 400, 300, 130);
grd.addColorStop(0, "#dddddd20");
grd.addColorStop(1, "#00FFFF66");
ctx.strokeStyle = grd;
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.ellipse(400, 300, 130, 95, 0.06, 0, Math.PI * 2);
var grd = ctx.createRadialGradient(400, 300, 95, 400, 300, 130);
grd.addColorStop(0, "#dddddd20");
grd.addColorStop(1, "#FFFF0066");
ctx.strokeStyle = grd;
ctx.lineWidth = 3;
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.ellipse(400, 300, 130, 95, 0, 0, Math.PI * 2);
var grd = ctx.createRadialGradient(400, 300, 95, 400, 300, 130);
grd.addColorStop(0, "#dddddd20");
grd.addColorStop(1, "#00FF0066");
ctx.strokeStyle = grd;
ctx.lineWidth = 3;
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.ellipse(400, 300, 130, 95, 0.1, 0, Math.PI * 2);
var grd = ctx.createRadialGradient(400, 300, 95, 400, 300, 130);
grd.addColorStop(0, "#dddddd20");
grd.addColorStop(1, "#8B00FF66");
ctx.strokeStyle = grd;
ctx.lineWidth = 4;
ctx.stroke();
ctx.closePath();
眼
ctx.beginPath();
ctx.ellipse(465, 275, 38, 26, 1, 0, Math.PI * 2);
ctx.ellipse(335, 275, 43, 29, -0.8, 0, Math.PI * 2);
ctx.fillStyle = "#000";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(344, 272, 22, 0, Math.PI * 2);
ctx.arc(458, 270, 20, 0, Math.PI * 2);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(344, 272, 17, 0, Math.PI * 2);
ctx.arc(458, 270, 15, 0, Math.PI * 2);
ctx.fillStyle = "#000";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(344, 272, 16, 0, Math.PI * 2);
var grd = ctx.createRadialGradient(344, 272, 0, 344, 272, 20);
grd.addColorStop(0, "#444");
grd.addColorStop(1, "#111");
ctx.fillStyle = grd;
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(458, 270, 14, 0, Math.PI * 2);
var grd = ctx.createRadialGradient(458, 270, 0, 458, 270, 20);
grd.addColorStop(0, "#444");
grd.addColorStop(1, "#111");
ctx.fillStyle = grd;
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(344, 272, 12, 0, Math.PI * 2);
ctx.arc(458, 270, 10, 0, Math.PI * 2);
ctx.fillStyle = "#000";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(350, 266, 4, 0, Math.PI * 2);
ctx.arc(452, 266, 3, 0, Math.PI * 2);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();
鼻子
ctx.beginPath();
ctx.moveTo(380, 280);
ctx.lineTo(420, 280);
ctx.lineTo(400, 295);
ctx.lineTo(380, 280);
ctx.fillStyle = "#000";
ctx.fill();
ctx.closePath();
嘴
ctx.beginPath();
ctx.moveTo(370, 323);
ctx.lineTo(400, 335);
ctx.lineTo(430, 323);
ctx.quadraticCurveTo(400, 330, 370, 323);
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.fillStyle = "#f00";
ctx.fill();
ctx.stroke();
ctx.closePath();
