canvas画布js代码实现大风车的动画

最新推荐文章于 2021-12-08 16:43:03 发布
最新推荐文章于 2021-12-08 16:43:03 发布
阅读量743 收藏 4
点赞数 1
分类专栏： html js 文章标签： canvas js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43260038/article/details/105178090
版权
html 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
js
17 篇文章 0 订阅
订阅专栏

通过js代码在canvas画布中实现大风车的动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大风车</title>
    <style type="text/css">
        #canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
        <!--//浏览器不支持canvas时，显示p标签中的内容-->
        <p>你的浏览器不支持canvas</p>
    </canvas>

    <script type="text/javascript">
        //初始化颜色
        let colors=["#FF0000","#FF7D00","#FFFF00","#00FF00","#0000FF","#00FFFF","#FF00FF"];
        let canvas = document.getElementById("canvas");//获取canvas样式（获取画布）
        let context = canvas.getContext("2d");//获取绘图上下文

        //平移坐标原点
        context.translate(200,200);
        //绘制动画-旋转大风车
        //1.绘制大风车
        drawWindmill();
        //2.设置动画方法

        //3.调用setInterval
        setInterval(animate,20);
        //动画方法
        function animate() {
            //清除画布
            context.clearRect(-200,-200,400,400);
            //再绘制大风车
            //每调用一次就旋转一度
            context.rotate(1*Math.PI/180);
            drawWindmill();

        }
        //绘制大风车
        function drawWindmill() {
            for(let i=0;i<6;i++){
                //画扇叶
                context.fillStyle=colors[i];
                context.beginPath();
                context.arc(80,0,80,0,Math.PI,false)
                context.fill();

                //将坐标系旋转60度
                context.rotate(60*Math.PI/180);
            }

            //画中心圆
            context.fillStyle="white";
            context.beginPath();
            context.arc(0,0,40,0,Math.PI*2,true);
            context.fill();

        }
    </script>
</body>
</html>
时光飞逝，岁月依然
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用canvas的rotate创建一个简易的风车动画
haibeimingsi的专栏
08-28 3413
刚接触canvas的rotate属性,突发奇想能不能用它做个风车转动的效果，可是它旋转时却不是按照固定点旋转的，后来查阅了网上资料，网上说rotate旋转的不是图形，而是画布，于是我就想到将要旋转图形的某个点放在原点处，再通过translate到指定位置，果然可行。下面附上参考代码： var WINDOW_WIDTH=800; var WINDOW_HEIGHT=800; w
彩色大风车泡泡Canvas特效
07-24
总结来说，“彩色大风车泡泡Canvas特效”是HTML5 Canvas技术在动态图形和动画领域的应用实例，它展示了如何利用Canvas API结合JavaScript实现复杂而有趣的动画效果。开发者可以通过学习和实践此类项目，提升自己在...
HTML5 canvas 实现 大风车动画
07-05
HTML5 canvas 实现 大风车动画
JS 实现玩转风车
weixin_53106424的博客
02-04 212
JS 实现玩转风车 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>找风车</title> <style> #div1{ width: 800px; height: 610px; border: 1px solid red;
canvas动态风车
qq_36762151的博客
12-08 602
canvas风车效果
HTML5 Canvas 旋转风车绘制
01-19
写在前面： 亲爱的朋友们大家好，鄙人自学前端，第一次写博客，写的不好的地方，烦请同学们谅解. 在进行教学之前，我想聪明的你已经掌握了基本的Canvas基本操作方法，如果对Canvas还不是很了解，那么我建议你去http://www.w3school.com.cn/tags/html_ref_canvas.asp这里先熟悉一下； okey！下图即是我们完成后的简单效果，心动不如行动，那么咱们就进行简单绘制吧！　　　　 1、定义画布 首先我们现在html文件里面插入<canvas>标签，定义画布的尺寸，我这里定义画布的尺寸为800*600像素。同时在内部样式表里面设置canvas的背景色（方便画
java画会转动的风车_HTML5 Canvas 旋转风车绘制
weixin_42098104的博客
02-26 264
写在前面：亲爱的朋友们大家好，鄙人自学前端，第一次写博客，写的不好的地方，烦请同学们谅解.在进行教学之前，我想聪明的你已经掌握了基本的Canvas基本操作方法，如果对Canvas还不是很了解，那么我建议你去http://www.w3school.com.cn/tags/html_ref_canvas.asp这里先熟悉一下；okey！下图即是我们完成后的简单效果，心动不如行动，那么咱们就进行简单绘制...
【JS】使用canvas绘制动画-旋转风车加速减速启动停止
阿来小同学的博客
12-19 2388
使用canvas绘制动画-旋转风车加速减速启动停止。 结果截图详见如下： 源码如下： 风车 div{ text-align:center; } var internal = 0;//初始化间隔 var internal_Max = 60; //最大间隔 var rotation_a
HTML5中利用animation属性实现风车动画案例
大数据-攻城狮
12-07 3376
Document
HTML5 canvas 实现 有底坐大风车动画
07-06
这个【标题】"HTML5 canvas 实现 有底坐大风车动画"揭示了一个利用canvas实现的具体应用，即创建一个带有底座的动态风车动画效果。这涉及到的知识点主要包括以下几个方面： 1. **HTML5 canvas基础**：HTML5 canvas...
风车动画效果
12-04
web端实现风车效果的动画，纯css动画效果，没有用js,动画绑定
HTML5CSS3实现大风车旋转动画效果源码下载
09-14
HTML5CSS3实现大风车旋转动画效果源码下载
HTML5 CSS3大风车旋转动画.zip
07-04
在这个大风车动画中，Canvas被用作画布，JavaScript负责计算和更新风车叶片的旋转角度、速度以及与用户的交互。开发者可能使用了`requestAnimationFrame`方法来平滑地刷新动画，确保在每帧之间进行正确的计算，以...
js简单实现大风车
weixin_45000814的博客
03-08 1116
今天分享下大风车的制作，效果图如下，其实看着挺好看的，哈哈… HTML和CSS 上述代码主要就是搭建一个风车的形状和按钮的初始状态。 先给个容器包括四个扇叶，设置形状背景和相对定位，因为四个扇叶要定位到上面。 风车四个边，固定宽高，加上绝对定位，改变左上的形状，使其变成尖角。同时改变旋转基点，其他三个扇叶依次旋转90度倍数就可以了。 改变按钮的位置，加上背景。value是按钮上要显示的初始值，...
动态风车
IT_WEB_WZZ的博客
12-01 799
动态风车 *{ padding:0; margin:0; } body{ background:#000; } div:nth-child(1){ height:0; width:10px; border-width:0 20px 12
Android自定义View之风车
这个杀手不太累的博客
08-21 352
文章目录效果图：画杆画风车旋转在布局文件中使用 效果图： 画杆 public class WindmillRodView extends View { private int mWidth; private int mHeight; private Paint mPaint; public WindmillRodView(Context context) { ...
使用p5.js画一幅简单的风车动态效果图
aasdf245的博客
11-12 6981
使用p5.js画一幅简单的动态风车图 因为大三互动媒体技术课程需要使用p5.js画图显示动态效果，并和自己手绘作品进行对比，查了查网上好像没有做风车相关的教程，就在这里简单介绍下吧。 工具 js编辑器(我用的是visual studio code2017)和p5.js库，具体下载和配置步骤这里就不讲了。不清楚的朋友可以参考下这篇博客: p5.js入门教程. 一.做一个简单的静态风车 画个风车很简...
canvas 画布js代码
最新发布
07-16
以下是一个使用JavaScript和HTML的Canvas画布的基本示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas Example</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 绘制矩形 context.fillStyle = "blue"; context.fillRect(50, 50, 100, 100); // 绘制圆形 context.fillStyle = "red"; context.beginPath(); context.arc(200, 200, 50, 0, 2 * Math.PI); context.fill(); </script> </body> </html> ``` 在上述代码中，我们通过`document.getElementById("canvas")`获取了Canvas元素，并使用`getContext("2d")`方法获取了2D绘图上下文。然后，我们使用绘图上下文的方法和属性来绘制图形。 在示例中，我们绘制了一个蓝色的矩形和一个红色的圆形。使用`fillRect()`方法绘制矩形，指定左上角的坐标（50, 50），矩形的宽度和高度为100。使用`fillStyle`属性设置填充颜色。使用`beginPath()`方法开始绘制圆形路径，使用`arc()`方法绘制圆形，指定圆心的坐标（200, 200）、半径为50、起始角度为0、结束角度为2π。最后，使用`fill()`方法填充圆形。 你可以根据需要进一步扩展和修改绘图代码。Canvas提供了丰富的方法和属性来绘制各种形状和效果的图形。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值