JQuery制作小风车特效

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas小风车-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin:0px;
padding:0px;
}
body {
background-color:lightblue;
}
#mydiv > #myCanvas {
background-color:white;
border:solid 5px LightSalmon;
}
</style>
</head>
<body>
<div id="mydiv">
<canvas id="myCanvas">
对不起，您的浏览器不支持HTML5，请升级浏览器至IE9、firefox或者谷歌浏览器！
</canvas>
</div><script>
var WINDOW_WIDTH = 300;
var WINDOW_HEIGHT = 300;
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
var num = 0;
setInterval(function() {
num++
rotate(context, num);
}, 10);

}

function rotate(cxt, num) {
cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
cxt.save();
cxt.translate(150, 150);
cxt.rotate(num * Math.PI / 180);
draw(cxt);
cxt.restore();
}

function draw(cxt) {

cxt.beginPath();
cxt.fillStyle = "red";
cxt.moveTo(0, 0);
cxt.arcTo(100, -100, 0, -200, 100);
cxt.fill();
cxt.closePath();

cxt.beginPath();
cxt.fillStyle = "yellow";
cxt.moveTo(0, 0);
cxt.arcTo(100, 100, 200, 0, 100);
cxt.fill();
cxt.closePath();

cxt.beginPath();
cxt.fillStyle = "blue";
cxt.moveTo(0, 0);
cxt.arcTo(-100, 100, 0, 200, 100);
cxt.fill();
cxt.closePath();

cxt.beginPath();
cxt.fillStyle = "green";
cxt.moveTo(0, 0);
cxt.arcTo(-100, -100, -200, 0, 100);
cxt.fill();
cxt.closePath();
}</script>
</body>
</html>

JQuery制作小风车特效相关推荐

html5跳动的心电图,jquery制作心电图跳动特效
1.[代码][JavaScript]代码 var parts = 100; //切割数量 var imgIndex = 0; //当前图片 $(function(){ var op = { width ...
小风车跳转微信如何实现？如何实现抖音小风车挂车自由？
实现小风车跳转微信/公众号是一个比较复杂的流程,你可以按照步骤自己制作: 想要节约时间,剩下的也可以找专业的我们来帮你制作. 天天外链 - 链接一键跳转微信公众号/小程序/企业微信! 一.制作小风车最 ...
北大青鸟 JQuery制作特效第二章（上机练习
北大青鸟 JQuery制作特效第二章 (上机练习练习一丶制作简易的当当购物车页面 <!DOCTYPE html> <html> <head lang="en ...
北大青鸟 JQuery 制作特效第一章课后简答题
北大青鸟 JQuery 制作特效第一章课后简答题简单三丶打印倒正金字塔直线 <!DOCTYPE html> <html> <head lang="en&q ...
北大青鸟使用JQuery制作特效第一章（上机练习
北大青鸟使用JQuery制作特效第一章(上机练习练习一丶--统计包含"a"或"A"的字符串个数 <!DOCTYPE html> <htm ...
CSS3制作旋转的小风车
制作旋转小风车一我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个, css样式 *{margin:0;paddi ...
css3之制作旋转小风车
下面教大家做一个旋转小风车,所用知识与我上一篇的爱心特效有相似之处,大家可以看看我前面发的文章,好了,下面就展示我的代码吧 <!DOCTYPE html> <html> < ...
jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效
原文:jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效源代码下载地址:http://www.zuidaima.com/share/1607128309009408.htm
使用JQuery快速高效制作网页交互特效第六章所有上机
上机一样式 body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;} body{font-family: "微软雅 ...

JQuery制作小风车特效

JQuery制作小风车特效相关推荐

最新文章

热门文章