自己用h5写的转盘。写贴上来吧。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas">你的浏览器版本太低不支持HTML5</canvas>
<script> function turnTable(R,r,length){
//这四行都是获取canvas环境的。
var canvas=document.getElementById("canvas");
canvas.width=2*R;
canvas.height=2*R;
var context=canvas.getContext("2d"); //这个是参数，很重要的参数。错了一个就死翘翘了。
// var value_x=[1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2),0,Math.sqrt(2)]
// var value_y=[0,Math.sqrt(2),1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2)]
//上面的参数是用枚举法表示x,y的坐标。当时忘了可以用三角函数表示圆的每个点的坐标。
//translate是变换，把转盘移到中间。
context.translate(R,R)
//绘制转盘路径并画出来。
for(var i=0;i<length;i++) {
//设置每块的颜色。这个可以去掉，只是为了区分
var RIGOU=Math.round(Math.random()*255)
var G=Math.round(Math.random()*255)
var B=Math.round(Math.random()*255)
var color="rgba("+RIGOU+","+G+","+B+",0.9)"
//这里是换算为弧度制计算，rad是起始弧度，nextRad是终止弧度。
var everyRad=(2*Math.PI)/length
var rad=everyRad*i
var nextRad=everyRad*(i+1) context.beginPath()
//绘制路径。最难搞的东西。
context.lineTo(r*Math.cos(rad), r*Math.sin(rad))
context.lineTo(R*Math.cos(rad), R*Math.sin(rad))
context.arc(0, 0, R, rad, nextRad, false)
context.lineTo(r*Math.cos(nextRad), r*Math.sin(nextRad))
context.arc(0, 0, r, nextRad, rad, true)
context.closePath()
//填充路径颜色
context.fillStyle = color
context.fill()
}
}
//调用函数。第一个参数是外圆半径，第二个是小圆半径。同时canvas画布的大小是根据外圆半径而设定。
turnTable(300,80,10) </script>
</body>
</html>
上面的是转盘的代码。接下来这个是有空隙的转盘代码。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas">你的浏览器版本太低不支持HTML5</canvas>
<script> function turnTable(R,r,length){
//这四行都是获取canvas环境的。
var canvas=document.getElementById("canvas");
canvas.width=2*R;
canvas.height=2*R;
var context=canvas.getContext("2d"); //这个是参数，很重要的参数。错了一个就死翘翘了。
// var value_x=[1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2),0,Math.sqrt(2)]
// var value_y=[0,Math.sqrt(2),1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2)]
//上面的参数是用枚举法表示x,y的坐标。当时忘了可以用三角函数表示圆的每个点的坐标。
//translate是变换，把转盘移到中间。
context.translate(R,R)
context.scale(0.5,0.5)
//绘制转盘路径并画出来。
var flag=0
for(var i=0;i<length;i++) { //这里是换算为弧度制计算，rad是起始弧度，nextRad是终止弧度。
var everyRad=(2*Math.PI-1)/length var rad=(everyRad)*i+0.1*flag
flag++
var nextRad=(everyRad)*(i+1)+0.1*flag
flag++
context.beginPath()
//绘制路径。最难搞的东西。
context.moveTo(r*Math.cos(rad), r*Math.sin(rad))
context.lineTo(R*Math.cos(rad), R*Math.sin(rad))
//这里加了一个十分重要的参数！！！十分重要！！！0.058十分重要！！！
context.arc(0, 0, R, rad, nextRad+0.058, false)
context.lineTo(r*Math.cos(nextRad), r*Math.sin(nextRad))
context.arc(0, 0, r, nextRad, rad, true)
context.closePath()
//填充路径颜色
context.fillStyle = "#6AD16A"
context.fill()
}
}
//调用函数。第一个参数是外圆半径，第二个是小圆半径。同时canvas画布的大小是根据外圆半径而设定。
turnTable(200,80,5) </script>
</body>
</html>
最后的这个则是加了简单定时器实现抽奖的转盘代码。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> </head>
<body>
<canvas id="canvas" class="canvas">你的浏览器版本太低不支持HTML5</canvas> <a href="javascript:(void)" id="btn" style="display: block;position:absolute; left:260px;top:280px;font-size: 24px;
background-color:#419641;opacity: 0.8;padding: 10px;color: #ffffff;text-decoration: none;
">点击抽奖</a>
<script> function turnTable(R,r,length){
//这四行都是获取canvas环境的。
var canvas=document.getElementById("canvas");
canvas.width=2*R;
canvas.height=2*R;
var context=canvas.getContext("2d"); //这个是参数，很重要的参数。错了一个就死翘翘了。
// var value_x=[1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2),0,Math.sqrt(2)]
// var value_y=[0,Math.sqrt(2),1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2)]
//上面的参数是用枚举法表示x,y的坐标。当时忘了可以用三角函数表示圆的每个点的坐标。
//translate是变换，把转盘移到中间。
context.translate(R,R)
//绘制转盘路径并画出来。
for(var i=0;i<length;i++) {
//设置每块的颜色。这个可以去掉，只是为了区分
var RIGOU=Math.round(Math.random()*255)
var G=Math.round(Math.random()*255)
var B=Math.round(Math.random()*255)
var color="rgba("+RIGOU+","+G+","+B+",0.9)"
//这里是换算为弧度制计算，rad是起始弧度，nextRad是终止弧度。
var everyRad=(2*Math.PI)/length
var rad=everyRad*i
var nextRad=everyRad*(i+1) context.beginPath()
//绘制路径。最难搞的东西。
context.lineTo(r*Math.cos(rad), r*Math.sin(rad))
context.lineTo(R*Math.cos(rad), R*Math.sin(rad))
context.arc(0, 0, R, rad, nextRad, false)
context.lineTo(r*Math.cos(nextRad), r*Math.sin(nextRad))
context.arc(0, 0, r, nextRad, rad, true)
context.closePath()
//填充路径颜色
context.fillStyle = color
context.fill()
}
}
//调用函数。第一个参数是外圆半径，第二个是小圆半径。同时canvas画布的大小是根据外圆半径而设定。
turnTable(300,80,8) var btn=document.getElementById("btn") btn.onclick=function(){
var lowSpeed=20
var temp=0
var timer=null
timer=setInterval(function(){
temp+=Math.random()*20+15
canvas.style.transform="rotate("+temp+"deg)"
},30) setTimeout(function(){
clearInterval(timer)
timer=setInterval(function(){
if(lowSpeed>0) {
lowSpeed-=0.5
temp += lowSpeed
canvas.style.transform = "rotate(" + temp + "deg)"
}
else{
clearInterval(timer)
}
},30)
},1000)
}
</script>
</body>
</html>
自己用h5写的转盘。写贴上来吧。的更多相关文章
- 移动端 h5 uniapp 读，写，删本地文件或sd文件
移动端 h5 uniapp 读,写,删本地文件或sd文件 应用场景: 当我们需要做离线应用或者是加载本地文件时使用到此方法.(本篇文章给大家分享访问app私有文件目录,系统公共目录,sd外置存储的文件 ...
- 象写程序一样写博客：搭建基于github的博客
象写程序一样写博客:搭建基于github的博客 前言 github 真是无所不能.其 Pages 功能 支持上传 html,并且在页面中显示.于是有好事者做了一个基于 github 的博客管理工具 ...
- 《自己动手写CPU》写书评获赠书活动结果
<自己动手写CPU>写书评获赠图书的读者有: 京东:8***2.16号哨兵.magicyu.kk6803.jddickyd.杰出的胡兵 亚马逊:徐贺.马先童.jaychen.farmfar ...
- SSD 为什么顺序写比随机写性能更好？
SSD以Page为单位做读写,以Block为单位做垃圾回收,Page一般有16KB大小,Block一般有几十MB大小,SSD写数据的逻辑是: 1)将该块数据所在的Page读出 2)修改该Page中该块 ...
- 通过hive向写elasticsearch的写如数据
通过hive向写elasticsearch的写如数据 hive 和 elasticsearch 的整合可以参考官方的文档: ES-hadoop的hive整合 : https://www.elastic ...
- 如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果
如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果
- mnesia的脏写和事物写的测试
在之前的文章中,测试了脏读和事物读之间性能差别,下面测试下脏写和事物写之间的性能差别: 代码如下: -module(mnesia_text). -compile(export_all). -recor ...
- OS: 读者写者问题(写者优先+LINUX+多线程+互斥量+代码)（转）
一. 引子 最近想自己写个简单的 WEB SERVER ,为了先练练手,熟悉下在LINUX系统使用基本的进程.线程.互斥等,就拿以前学过的 OS 问题开开刀啦.记得当年学读者写者问题,尤其是写者优先的 ...
- Qt侠：像写诗一样写代码，玩游戏一样的开心心情，还能领工资！
[软]上海-Qt侠 2017/7/12 16:11:20我完全是兴趣主导,老板不给我钱,我也要写好代码!白天干,晚上干,周一周五干,周末继续干!编程已经深入我的基因,深入我的骨髓,深入我的灵魂!当我解 ...
- 程序代写, CS代写, 代码代写, CS编程代写, java代写, python代写, c++/c代写, R代写, 算法代写, web代写
互联网一线工程师程序代写 微信联系 当天完成 查看大牛简介特色: 学霸代写,按时交付,保证原创,7*24在线服务,可加急.用心代写/辅导/帮助客户CS作业. 客户反馈与评价 服务质量:保证honor ...
随机推荐
- Poj 2092 Grandpa is Famous(基数排序)
题目链接:http://poj.org/problem?id=2092 思路分析:先统计数据,在根据Count降序排序,Count相等时按照Num升序排序:再输出Count第二大的所有Num: 代码如 ...
- 基于物品的协同过滤推荐算法——读“Item-Based Collaborative Filtering Recommendation Algorithms” .
ligh@local-host$ ssh-copy-id -i ~/.ssh/id_rsa.pub root@192.168.0.3 基于物品的协同过滤推荐算法--读"Item-Based ...
- git 解决冲突的办法
在项目中使用git管理,冲突是在所难免的.假设没办法解决冲突,能够试试这个办法. 第一步.对project进行备份,最好是复制到其它目录中 第二步.在cmd命令栏上,进入到project文件夹下.这里 ...
- 怎样用Eclipse正确导入开源库AndroidStaggeredGrid
今天带给大家的是怎样正确导入开源库AndroidStaggeredGrid的代码,大家在使用github上的开源控件时,多多少少都遇到过像AndroidStaggeredGrid这样的project结 ...
- c++中的 堆和栈
/*用指针p存储堆中的空间时,在将第二块内存空间赋给p之前,我们要释放p原来指向的内存空间, 这样才不会造成内存泄漏,不然的话p原来记录的内存空间就找不到了,而且也无法再次利用 注意:你在使用new以 ...
- Activity跳转
本例中MainActivity为:FirstActivity.java FirstActivity如下: package com.wyl.intentmultiactivitytest; import ...
- XCode 6 出现 no identity found: Command /usr/bin/codesign failed with exit code 1 解决方法汇总
1, 解决办法,进入开发者账号重建一个 Provisioning Profiles(或配套证书) 文件,把证书添加正确就可以了 (应该是最有效的) 2, 将p12文件重新安装下 3, 在 iPhone ...
- 432B - Football Kit
解题思路: 暴力绝对TLE 一个队伍穿主场球衣的次数 = 这个队伍的客场球衣颜色与其他队主场球衣颜色起冲突的次数 + (n - 1) #include <stdio.h> #include ...
- iOS开发之计算动态cell的高度并缓存
项目中有个类似微博那样的动态cell,文字和图片的多少都不是确定的 刚开始使用autolayout,结果很多问题,最后我发现了一个框架 FDTemplateLayoutCell 写的很好,自动布局ce ...
- 引用 xp系统引导修复（转载）
引用 3592wangxiaoxi 的 xp系统引导修复(转载) 原文来自百度知道a12424106关于“急需xp系统引导方面的知识!”的回复. XP系统的引导过程 如果想学习排除计算机系统故障,首先 ...