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

柔光的暖阳◎ 2022-10-06 11:45 350阅读 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][]

[a87faaa0688ec393d977bb58d40e5c81.png]: /images/20221005/190f22bc7e4f4ebb9673614c6c0052a6.png
[7d2c7cdcf72efd2185f1082424fe5731.png]: /images/20221005/51add0a329a74fcebbabfeb46bdefd39.png

发表评论取消回复

表情：

评论列表（有 0 条评论，350人围观）

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

相关阅读

相关 HTML5 svg画布

svg画布创建（svg）线条（line）获取属性修改属性创建矩形（rect）

客官°小女子只卖身不卖艺/ 2023年06月23日 05:58/ 0 赞/ 62 阅读

相关 HTML5 canvas 画布

画布 canvas 与 svg canvas 能够做什么？创建一块小画布（canvas）创建画笔（getC

秒速五厘米/ 2023年06月22日 05:19/ 0 赞/ 67 阅读

相关 html5新属性----Canvas画布

HTML5 Canvas `<canvas>`标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，

Myth丶恋晨/ 2022年11月30日 04:06/ 0 赞/ 336 阅读

相关 html用画布画图,HTML5入门十---Canvas画布实现画图（一）

\}.ToolBar\{float:left;font-family:"微软雅黑";font-size:14px;font-variant:small-caps;text-al

水深无声/ 2022年10月10日 15:45/ 0 赞/ 296 阅读

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

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

柔光的暖阳◎/ 2022年10月06日 11:45/ 0 赞/ 351 阅读

相关 html5 canvas 画布基础

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

蔚落/ 2022年08月19日 13:08/ 0 赞/ 340 阅读

相关 HTML5学习笔记（三）canvas画布基础

一、基本内容 Canvas在HTML页面提供画布的功能，在画布中绘制各种图形 Canvas绘制的图形与HTML页面无关，无法通过DOM获取绘制

分手后的思念是犯贱/ 2022年04月17日 00:26/ 0 赞/ 364 阅读

相关 HTML5画布canvas实战(1)--折线图

画布基本教程 [画布基础知识和绘制][Link 1] [Canvas MDN][] 唠唠叨叨 > canvas 是 HTML5 新增的元素，可用于通过使用Ja

左手的ㄟ右手/ 2022年02月23日 06:34/ 0 赞/ 726 阅读

相关使用HTML5画布（canvas）生成阴影效果

日期：2013-7-12 来源：[GBin1.com][] [![使用HTML5画布（canvas）生成阴影效果][HTML5_canvas]][HTML5_canvas_

柔光的暖阳◎/ 2022年01月09日 23:47/ 0 赞/ 350 阅读

相关 html5 canvas清空画布方法

总结以下三种清空canvas画布的方式： 1. 最简单的方法：由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空： \[javascript

àì夳堔傛蜴生んèń/ 2021年09月14日 09:28/ 0 赞/ 632 阅读