오랫동안 캔버스를 만지지 않았는데 오늘 오후에 갑자기 복습하고 싶어서 회전태극권을 작성해봤습니다. ㅎㅎ 여기에서는 CSS를 사용하여 작성하는 과정을 보여드리겠습니다. , 캔버스 자체가 아니라 큰 사람들이 불평하지 않기를 바랍니다.
CSS
body{ 배경: #ddd;}#canvas{ 위치: 절대; 왼쪽: 30%; -webkit-transform: 번역(-50%,-50%); %,-50%); -ms-변환: 변환(-50%,-50%); -o-변환: 변환(-50%,-50%); 번역(-50%,-50%); -webkit-animation: testAnimate 3s 선형 무한; -o-animation: testAnimate 3s 선형 무한;}@keyframes testAnimate { from { -webkit-transform: 회전(0); -moz-변형: 회전(0); -ms-변환: 회전(0); 변환: 회전(0); }에서 { -webkit-transform: 회전(360deg); -ms-transform: 회전(360deg); 변환: 회전(360deg) }}HTML
<body> <canvas id=canvas width=500 height=500></canvas></body>
JS
let ctx = document .getElementById(canvas) .getContext(2d);// left-black-bigctx.beginPath();ctx.fillStyle = #000;ctx.arc(250,250,200,Math.PI/2,Math.PI* 1.5,false);ctx.closePath();ctx.fill();// right-white-bigctx.beginPath();ctx.fillStyle = #fff;ctx.arc(250,250,200,Math.PI/2,Math.PI*1.5,true);ctx.closePath();ctx.fill(); // top-black-middlectx.beginPath();ctx.fillStyle = #000;ctx.arc(250,150,100,Math.PI/2,Math.PI*1.5,true);ctx.closePath();ctx.fill();// Bottom-white-middlectx.beginPath();ctx. 채우기 스타일= #fff;ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);ctx.closePath();ctx.fill();// top-white-smallctx.beginPath();ctx. 채우기 스타일= #fff;ctx.arc(250,150,25,0,Math.PI*2);ctx.closePath();ctx.fill();// Bottom-black-smallctx.beginPath();ctx.fillStyle = #000;ctx.arc(250,350,25,0,Math.PI*2);ctx.closePath();ctx.fill();
효과
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.