canvas动态风车

该风车绘制的核心方法：arcTo() ，一开始还想用arc(),想了半天无法确定旋转的原点坐标，后来发现方法选错了。

思路：

1、动态效果：绘制一个画面，清除后，再绘制角度改变后的画面。j：为每次整体旋转角度

2、多瓣效果：将画布原点作为每瓣图形的起始点，再旋转一定角度，做出多瓣

<canvas width="300px" height="300px" id="canvas02">浏览器不支持canvas</canvas>

    let canvas2 = document.querySelector("#canvas02")canvas2.style.backgroundColor = "#eee"function draw02(){let ctx = canvas2.getContext("2d")let j = 0;function startWindmill(){//清除上一次画面，重新绘制ctx.clearRect(0,0,300,300)//创建6瓣风车for(let i=0;i<6;i++){//保存目前状态ctx.save()//移动画布原点ctx.translate(150,150)drawWindmill(i)//还原到原有状态。原点 0,0、角度0时ctx.restore()}function drawWindmill(i){let angle = (i*60)+jctx.beginPath()ctx.rotate(Math.PI*angle/180)ctx.moveTo(0,0)ctx.arcTo(50,0,50,50,50)   //风车的关键ctx.fillStyle = `rgb(255,${i*40},0)`ctx.fill()}j = j===340 ? 0 : j+20}/** 旋转速度100ms*/setInterval(()=>{startWindmill()},100)}draw02()

arcTo()方法图例，参考网站链接：学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程

canvas动态风车相关推荐

掌财社:前端接口怎么实现canvas动态图形效果?方法详情！
我们在通过上个文章中的分享我们知道大概有关于如何利用canvas来进行图形绘制这方面的相关内容,那么今天我们接着来说说有关于"前端接口怎么实现canvas动态图形效果?"这个问题的 ...
html5拓扑图图入门,如何使用HTML5 Canvas动态的绘制拓扑图
如何使用HTML5 Canvas动态的绘制拓扑图使用HTML5 Canvas动态的绘制拓扑图: HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
【如何实现一个简单的canvas动态水球图】
** 如何实现一个简单的canvas动态水球图. ** 由于在项目中遇到有个制作一个水球图需求,在网上查找相关资料比较少,样式又不符合预期,在这样的情况下封装了一个自己可更改.定制化的水球图动效组件. ...
java canvas 动态画图_canvas前端动图如何实现
展开全部 Canvas是HTML5中的重要组成部62616964757a686964616fe59b9ee7ad9431333366306464分,用于绘制简单的图形,定义路径,创建渐变及应用图像变换 ...
html5动态画图,HTML5使用Canvas动态绘制心型线和玫瑰线的教程
1HTML5的Canvas元素提供了丰富的绘图功能,能够使我们制作出许多精美的动画.本次将运用canvas绘制心型线和玫瑰线. 1.心型线和玫瑰线绘制这两种曲线,首先我们分别选用两个参数方程(心型线 ...
怎样用html制作动态心,HTML5使用Canvas动态绘制心型线和玫瑰线的教程
1html5的canvas元素提供了丰富的绘图功能,能够使我们制作出许多精美的动画.本次将运用canvas绘制心型线和玫瑰线. 1.心型线和玫瑰线绘制这两种曲线,首先我们分别选用两个参数方程(心型线 ...
几种炫酷的canvas动态背景特效
canvas光斑闪烁动态背景特效立即下载在线预览 canvas科技感粒子特效,html5科幻粒子动画代码,js鼠标跟随. 立即下载在线预览 htm5圆圈线条连接动画网页背 ...
Canvas动态改变宽高解决拉伸问题
之前开发模型渲染功能时,有一个特效是通过给目标canvas添加.修改filter属性实现.当时我发现一个问题:仅仅添加.修改filter一个属性后,canvas内容会被拉伸,导致滚动条出现(如下图,外 ...

canvas动态风车

canvas动态风车相关推荐

最新文章

热门文章