html画布动画,HTML5画布CANVAS动画。

柔光的暖阳◎ 2022-10-06 11:45 387阅读 0赞

就剩那两个大半圆不知道怎么用代码表示了，求大神给看下，怎么设置的才可以以自己的圆心来转。实现旋转的八卦。不能上传视频，有个转的过程图，在最下面。

your browser does not support the canvas tag

var deg1=0.0;

var deg2=0.0;

var deg3=0.0;

var deg4=0.0;

var deg5=0.0;

var deg6=0.0;

setInterval(drawCircle,40);

function drawCircle() {

var canvas = document.getElementById(‘myCanvas’);

var context = canvas.getContext(‘2d’);

context.clearRect(0, 0, 500, 500);

context.beginPath();

context.fillStyle = “black”;

var px =Math.sin(deg5)*100;

var py =Math.cos(deg5)*100;

context.arc(300+px,300-py,200,1.5*Math.PI,0.5*Math.PI,true);

context.fill();

deg5 +=0.05; //黑色大半圆

context.beginPath();

context.fillStyle = “red”;

var px =Math.sin(deg6)*100;

var py =Math.cos(deg6)*100;

context.arc(300+px,300-py,200,0.5*Math.PI,1.5*Math.PI,true);

context.fill();

deg6 +=0.05; //红色大半圆

context.beginPath();

context.fillStyle = “red”;

var px =Math.sin(deg4)*100;

var py =Math.cos(deg4)*100;

context.arc(300-px,300+py,100,0,2*Math.PI,true);

context.fill();

deg4 +=0.05; //红色中圆

context.beginPath();

context.fillStyle = “black”;

var px =Math.sin(deg2)*100;

var py =Math.cos(deg2)*100;

context.arc(300-px,300+py,25,0,2*Math.PI,true);

context.fill();

deg2 +=0.05; //黑色中圆

context.beginPath();

context.fillStyle = “black”;

var px =Math.sin(deg3)*100;

var py =Math.cos(deg3)*100;

context.arc(300+px,300-py,100,0,2*Math.PI,true);

context.fill();

deg3 +=0.05; // 黑色小圆

context.beginPath();

context.fillStyle = “red”;

var px =Math.sin(deg1)*100;

var py =Math.cos(deg1)*100;

context.arc(300+px,300-py,25,0,2*Math.PI,true);

context.fill();

deg1 +=0.05; //红色小圆

}

a87faaa0688ec393d977bb58d40e5c81.png

7d2c7cdcf72efd2185f1082424fe5731.png

发表评论

表情：
评论列表 （有 0 条评论，387人围观）

还没有评论，来说两句吧...

相关阅读

    相关 html5 canvas 画布基础

    canvas 画布基础 学习整理的笔记，内容丰富 有绘制矩形，绘制线条，绘制二次贝塞尔曲线，绘制弧线等。知识点在代码注释中 效果图： ![Center][]

    蔚落蔚落/ 0 赞/ 383 阅读