Я давно не прикасался к холсту. Сегодня днем мне вдруг захотелось просмотреть его, поэтому я написал вращающийся Тай Чи. Хаха, это довольно весело, я покажу здесь процесс его написания. , а не само полотно, надеюсь, большие ребята не будут жаловаться.
CSS
body {background: #ddd;}#canvas{ позиция: абсолютная; слева: 40%; сверху: 30%; -webkit-transform: Translate(-50%,-50%); %,-50%); -ms-transform: транслировать(-50%,-50%); -o-transform: транслировать(-50%,-50%); Translate(-50%,-50%); -webkit-animation: testAnimate 3s линейная бесконечность; -o-animation: testAnimate 3s линейная бесконечность;}@keyframes testAnimate { from { -webkit-transform: вращать (0); -moz-преобразование: вращать (0); -ms-преобразование: вращать (0); -o-преобразование: вращать (0); преобразование: вращать (0); } в { -webkit-transform: вращать (360 градусов); -moz-transform: вращать (360 градусов); -ms-transform: вращать (360 градусов); преобразование: поворот (360 градусов}};HTML
<body> <canvas id=ширина холста=500 высота=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. fillStyle = #fff;ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);ctx.closePath();ctx.fill();// top-white-smallctx.beginPath();ctx. fillStyle = #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.