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

通过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.调用setIntervalsetInterval(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>

canvas画布js代码实现大风车的动画相关推荐

java打印大风车的代码_canvas画布js代码实现大风车的动画
大风车 #canvas{ border: 1px solid black; } 你的浏览器不支持canvas //初始化颜色 let colors=["#FF0000"," ...
Canvas编程练习：20几行js代码实现雷达扫描动画效果
灵感源于一不小心挖了一个陈年老贴etherdream发的<[分享]魔兽技能冷却效果(希望能有更好的思路)>的坟,看他的代码太长(约200行),于是自己动手写了一个,也就20多行代码,效果也 ...
写一段js代码生成心形动画，动画路径内部填充渐变色
以下是一个用纯JS和HTML5 Canvas实现的生成心形动画的代码,路径内部填充渐变色: <canvas id="myCanvas"></canvas>& ...
html5画布作品,HTML5 Canvas 画布(示例代码)
一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素加上基本的属 ...
借场雪吧~ js下雪动画 canvas画布实现下雪特效
这里我直接放在了app下面,因为我就下3秒.要一直下的建议换个位置哈. <div id="app"></div> <canvas id="c ...
更新——Canvas画布动画效果之实现倒计时
Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...
html5 图片弹跳,html5 canvas画布里面圆球弹跳动画效果代码
特效描述:html5 canvas 画布圆球弹跳动画.html5 跳动的球体代码结构 1. HTML代码 Untitled Document body { margin: 0px; } var i ...
Chart.js清空canvas画布 clearRect()等canvas方法擦除失败（附完整代码）
Chart.js清空canvas画布 clearRect等canvas方法擦除失败一.直接移除DOM对象方式原因方法二.完整代码 html javascript chart.js画图方法三. ...
使用HTML5画布实现的超棒javascript动画仪表板：gauge.js
日期:2012-8-8 来源:GBin1.com 在线演示今天我们分享来自guage.js的超棒动画仪表板实现,这个类库使用html5画布来生成动态的自定义仪表板.不依赖于任何类库也不实用任何的C ...

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

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

canvas画布js代码实现大风车的动画相关推荐

最新文章

热门文章