手把手地教你怎么用canvas的rotate做出类似太阳系的嵌套运动

Phylicia ·

更新时间:2024-09-21

· 760 次阅读

需要运用到的关于canvas的一些代码

save（）方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore()
来恢复以前的值。
可是要注意，当前路径和当前位置并非图形状态的一部分，并且不会由这个方法保存。（以上均为w3chool里的介绍，但是这里我个人感觉有点问题下面会讲）

rotate() 方法根据原点旋转当前的绘图。

translate(x,y); 方法设定原点的指令之后我就就概括为原点。

beginPath() 方法开始一条路径，或重置当前的路径。

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo()
方法定义的路径。默认颜色是黑色。（也可以当做结束当前画的图形的一个指令画完一个图形也就是在beginPath()
之后一定要加要不然会出现奇怪的效果）

clearRect(x,y,width,height)方法清空给定矩形内的指定像素。

globalCompositeOperation
属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。destination-over 在源图像上方显示目标图像。

arc(x,y,r,sAngle,eAngle,counterclockwise);画圆的方法

x 圆的中心的 x 坐标。 y 圆的中心的 y 坐标。 r 圆的半径。 sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。 counterclockwise 可选。规定应该逆时针还是顺时针绘图。 False = 顺时针，true逆时针。

fillStyle
strokeStyle
fill()等方法就此略过

接下来就开始操作！！


  var ctx = document.querySelector('canvas').getContext('2d');
 ctx.globalCompositeOperation = 'destination-over';
 //让新的图案覆盖原来的团，按照从下网上的顺序
  setInterval(function () {
    ctx.clearRect(0,0,500,500);
    //运用定时器来实现动画效果，每次都先清空画布
      //这里开始写代码咯
  },60)
`

然后开始搭建背景内容


  var ctx = document.querySelector('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';//让新的图案覆盖原来的团，按照从下网上的顺序
  setInterval(function () {
    ctx.clearRect(0,0,500,500);//运用定时器来实现动画效果，每次都先清空画布
    ctx.beginPath();//开始新的绘制
    ctx.arc(250, 250, 200, 0, Math.PI * 2, true);//以250,250的中心为原点画一个半径为200的圆圈当做太阳系的轨道
    ctx.strokeStyle='red';//
    ctx.stroke();//结束这次一次绘制
    ctx.beginPath();//开始新的一次绘制
    ctx.arc(250, 250, 30, 0, Math.PI * 2, true);//在中心画了个圆
    ctx.fillStyle='red';//中心填充的颜色是红色
    ctx.strokeStyle='red';//边框的颜色是红色色
    ctx.fill();//开始填充红色颜色
    ctx.stroke();//结束这一次绘制
  },60)

原创文章 4获赞 15访问量 1391 关注私信展开阅读全文
作者：TNTNT_T