java打印大风车的代码_canvas画布js代码实现大风车的动画

大风车

#canvas{

border: 1px solid black;

}

你的浏览器不支持canvas

//初始化颜色

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();

}

java打印大风车的代码_canvas画布js代码实现大风车的动画相关推荐

java打印心_使用java打印心型与圆形图案实现代码示例
本篇文章小编给大家分享一下使用java打印心型与圆形图案实现代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 相信对于打印三角形都没什么难度,只 ...
如何保护前端JS代码？前端js代码加密
Web前端JS代码需要保护吗? 这得具体情况具体分析. 1.如果只是写一段web页面图片轮播,或是跑马灯效果等等之类简单的功能.那不需要保护. 2.如果是精心设计一个绚丽的特效,如果想要保护这段自己付 ...
canvas画布js代码实现大风车的动画
通过js代码在canvas画布中实现大风车的动画 <!DOCTYPE html> <html lang="en"> <head><meta ...
java js隐藏_Javascript匿名函数是否仍然可见？ (使用Java applet,这是一种隐藏JS代码的方法)...
我正在使用Javascript编写应用程序.我正在寻找一种隐藏代码的方法,我想我已经找到了一个使用Java Applet的代码. 无论如何,我认为只有在评估js匿名函数的代码后仍然无法以任何方式访问它 ...
js 无弹框打印_打印预览,关闭窗口等js代码
我的打印预览.打印本页.另存为.关闭本页的js代码 2011-08-08 09:45:25| 分类: javascript | 标签: |字号大中小订阅 . &ltOBJECT classi ...
eclipse 新建java无scr_解决eclipse中没有js代码提示的问题
自学js,发现eclipse中不管js文件.html文件.jsp文件没有都没js代码的提示,对于js代码也不报错,有时候就因为单词敲错却查了很久没查出来,很烦很难受. 在网上找了很多方法,都没有解决, ...
android和js交互的代码,Android与JS代码交互
现如今,很多Android APP都要与JS进行交互,而WebView就是Android与JS交互的桥梁,日常中最常见Android和JS交互有:APP注册协议,APP里的文章,APP里的活动页,这都 ...
Smarty中直接加JS代码和将JS代码写在literal标签里
采用Smarty模板的html怎么加入JS代码呢? 如果按一般平常添加方法,会出错 .因为 Smarty会将"{}"解析为自己的方法,和js中的"{}"会冲突. ...
可重复使用Tab切换代码和纯js代码
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...

java打印大风车的代码_canvas画布js代码实现大风车的动画

java打印大风车的代码_canvas画布js代码实现大风车的动画相关推荐

最新文章

热门文章