인턴십 동안 저는 캔버스를 사용하여 표현을 그려 달라는 요청을 받았습니다. 저는 별로 말을 하지 않고 곧바로 코드를 작성했습니다.
<body><div id=canvas-warp> <canvas id=canvas style=display: block; margin: 200px auto;> 귀하의 브라우저는 Canvas를 지원하지 않습니다! </canvas></div><script> onload = function () { var canvas = document.getElementById(canvas); canvas.width = 400; canvas.height = 400; //컨텍스트 가져오기 canvas.getContext(2d); //채워진 원을 그리는 데 사용되는 함수 매개변수는 중심 좌표, 반경, 시작 및 끝 위치, 선 색상, 채우기 색상입니다. function drawCircle(x2, y2, r2, a2, b2, lineColor, FillColor) { context.beginPath(); context.arc(x2, y2, r2, a2, b2 * Math.PI); context.fillStyle = FillColor; context.fill(); //채우기 확인 context.strok(); //원호 함수를 그리는 데 사용되는 기본 선은 채우기 없이 검은색입니다. 좌표, 반경, 시작 위치, 끝 위치 function drawsArc(x, y, r, l1, l2) { context.beginPath()(x, y, r, l1 * Math.PI, l2 * Math.PI ); context.StrokeStyle = black; context.Stroke() }; //눈을 그리는 데 사용되는 함수 function darwEyes(x1, y1, a1, b1) { //타원 중심 위치 컨텍스트의 장축 .스트로크스타일 = #754924 ParamEllipse(context, x1, y1, a1, b1); //타원 함수 ParamEllipse(context, x, y, a, b) { //각 사이클에 그려진 경로(호)를 1픽셀에 가깝게 만듭니다. var step = (a > b) ? 1 / a : 1 / b context.beginPath(); //타원의 왼쪽 끝점부터 그리기 시작합니다. for (var i = 0; i < 2 * Math.PI; i += step) { //매개변수는 i이며 각도(라디안)를 나타냅니다. context.lineTo(x + 에 * Math.cos(i), y + b * Math.sin(i)); context.fillStyle = #754924; context.Stroke() }; /face drawCircle(200, 200, 200, 0, 2, #EEE685, #FCF200); //왼쪽 눈 context.StrokeStyle = #754924 darwEyes(116, 130, 18, 25); drawCircle(110, 127, 12, 0, 2, #754924, #F5F5F5); //오른쪽 눈 darwEyes(296, 130, 18, 25); , 127, 12, 0, 2, #754924, #F5F5F5); //왼쪽 눈썹 drawsArc(100, 100, 50, 1.3, 1.7); //오른쪽 눈썹 drawsArc(300, 100, 50, 1.3, 1.7); 200, 120, 180, 0.3, 0.7); }</script></body>렌더링
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.