HTML5 canvas例子-抽奖轮盘-时钟

最新推荐文章于 2024-06-08 17:00:59 发布
最新推荐文章于 2024-06-08 17:00:59 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenzao1220/article/details/49850855
版权

画布

标签：<canvas>，用于绘制图像（通过脚本，通常是 JavaScript）。

例子：抽奖轮盘

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #cans{
            background-color: gray;
        }
    </style>
    <script>
        window.onload = function (){
            var cans = document.getElementById("cans");
            var pen = cans.getContext("2d");
            var arrColor = ["#7ACC5D", "#B5CC3E", "#CC9ABE", "#4E9ACC", "#CC4D56", "#AF1ECC", "#6C44CC", "#CC8939"];
            var arrText = ["0元","0.5元","1元","5元","10元","20元","50元","100元"];
            pen.translate(250,250);
            var flag = 0;
            var po = 50 + parseInt(Math.random()*30);
            var run = window.setInterval(function(){
                if (po <= 0.2){
                    window.clearInterval(run);
                    pen.beginPath();
                    pen.textAlign = "center";
                    pen.textBaseline = "middle";
                    pen.font = "20px 微软雅黑";
                    pen.fillText(arrText[arrText.length - Math.ceil(flag/45)],0,0);
                }else{
                    if (flag >= 360){
                        flag = 0;
                    }
                    po *= 0.95;
                    flag += po;
                    pen.clearRect(-250,-250,500,500);
                    pen.save();
                    pen.beginPath();
                    pen.lineWidth = 3;
                    pen.moveTo(170,0);
                    pen.lineTo(200,0);
                    pen.stroke();
                    pen.rotate(flag*Math.PI/180);

                    //转盘
                    (function(){
                        for (var i = 1;i <= 8 ;i++){
                            pen.beginPath();
                            pen.moveTo(0,0);
                            pen.lineWidth = 3;
                            pen.fillStyle = arrColor[i-1];
                            pen.arc(0,0,150,Math.PI*2/360*45*[i-1],Math.PI*2/360*45*i,false);
                            pen.closePath();
                            pen.stroke();
                            pen.fill();
                        }
                    }());

                    //中心圆
                    pen.beginPath();
                    pen.fillStyle = "white";
                    pen.arc(0,0,50,0,Math.PI*2);
                    pen.stroke();
                    pen.fill();

                        //文字
                    (function(){
                        for (var i = 0;i < arrText.length;i++){
                            pen.beginPath();
                            pen.save();
                            pen.font = "16px 微软雅黑";
                            pen.rotate((i*45+28)*Math.PI/180);
                            pen.fillText(arrText[i],70,0);
                            pen.restore();
                        }
                    }());
                pen.restore()
                }
            },50)
        }
    </script>
</head>
<body>
    <canvas id="cans" width="500" height="500"></canvas>
</body>
</html>

例子：时钟

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function (){
                var vas = document.getElementById("vas");
                var pen = vas.getContext("2d");
            window.setInterval(function(){
                //外圆
                pen.clearRect(0,0,500,500);
                pen.beginPath();
                pen.strokeStyle = "black";
                pen.lineWidth = 2;
                pen.fillStyle = "white";
                var originX = 250;
                var originY = 250;
                var radius = 120;
                pen.arc(originX,originY,radius,0,Math.PI*2);
                pen.stroke();
                pen.fill();

                var time = new Date();
                var hour = time.getHours()*30 + time.getMinutes()/2 - 90;
                var min = time.getMinutes()*6 - 90;
                var sec = time.getSeconds()*6 - 90;
                //刻度
                (function (){
                    pen.shadowColor = "transparent";
                    for (var i = 1; i <= 60;i++){
                        pen.beginPath();
                        var ang = i*6;
                        var wid = 2;
                        var rad = radius - 6;
                        if (i % 5 == 0 ){
                            rad = radius - 10;
                            wid = 3;
                        }
                        pen.lineWidth = wid;
                        pen.moveTo(Math.cos(ang*Math.PI*2/360)*radius + originX,Math.sin(ang*Math.PI*2/360)*radius + originY);
                        pen.lineTo(Math.cos(ang*Math.PI*2/360)*rad + originX,Math.sin(ang*Math.PI*2/360)*rad + originY);
                        pen.stroke()
                    }
                })();
                point(originX,originY,56,"red",4,hour,pen);
                point(originX,originY,76,"blue",3,min,pen);
                point(originX,originY,96,"yellow",2,sec,pen);
                //中心
                pen.beginPath();
                pen.fillStyle = "black";
                pen.arc(originX,originY,5,0,Math.PI*2);
                pen.stroke();
                pen.fill();
            },1000);

            //指针
            function point(originX,originY,r,color,width,ang,pen){
                pen.beginPath();
                ang = ang*Math.PI*2/360;
                pen.lineWidth = width;
                pen.shadowColor = "black";
                pen.shadowOffsetX = 3;
                pen.shadowOffsetY = 3;
                pen.strokeStyle = color;
                pen.moveTo(originX,originY);
                pen.lineTo(Math.cos(ang)*r + originX,Math.sin(ang)*r + originY);
                pen.stroke();
            }
        }
    </script>
</head>
<body>
    <canvas id = "vas" width=500 height=500 style="background-color: antiquewhite"></canvas>
</body>
</html>
morn夏目
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
抖音罗盘时钟
LIAOJIASONG1024的博客
10-08 6470
***其实很早以前就想发了，很多东西其实并不难，只要多动手动脑就行了，下面直接上代码，其他的自己下去慢慢研究吧！ HTML部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
电脑罗盘时钟代码_在电脑上使用30小时制时钟（Rainmeter）
热门推荐
weixin_39574050的博客
12-10 1万+
30小时制（30 Hour Format／30時間制）是在24小时制的基础上，将从午夜开始的0时至5时显示为24时至29时，并因此到06:00才切换日期的一种计时方式。这种计时方式目前还是一种很小众的习惯，但对于熬夜党（修仙党）而言，可以避免就寝前进行日期切换，较为人性化。尤其是对于偏好深夜追番的朋友：11区某番剧首播时间表目前为止，30小时制主要应用在一些专业领域的机器上，还未发现有一种主流电脑...
HTML实现转盘抽奖的简单通用模板
z2141830440的博客
11-29 2234
基本需求分析有一个由九个小正方形组成的大正方形，类似与一个3*3的矩阵，其中，最中间的小正方形颜色不同用于区分。为了实现抽奖的效果，我将外层的八个小正方形作为我的抽奖格，其中八个抽奖格中应该有一个格子的颜色不同于其他七个格子，用来表示当前抽中的物品，每次打开网页时，这个物品的位置应该是随机的当我开始抽奖时，这个被抽中的物品的颜色就会变成和其他七个格子的颜色一样，它相邻的一个格子的颜色则变为它原本的颜色就这样不停的变换，达到一个类似“动态”的效果，最后随机停在某个格子后就不再变换，表示为抽中的物品。
创意的时间轮盘时钟特效
06-01
js css3制作全屏的轮盘时钟，时间轮盘旋转动画特效。
前端做一个时钟罗盘
最新发布
2402_84765445的博客
06-08 392
这个时钟罗盘会根据当前的时间，动态地将时针、分针和秒针旋转到相应的位置。你可以将上述代码保存为HTML、CSS和JavaScript文件，然后在浏览器中打开HTML文件，就可以看到时钟罗盘的效果了。要实现一个时钟罗盘，可以使用HTML、CSS和JavaScript来完成。
圆盘时钟动画源码
05-06
圆盘时钟动画源码,很有美感，希望对在学前端的你能有所帮助
时钟程序（Windows桌面应用程序）源码
12-19
时钟程序最终版，功能如下： 1.获取当前时间，可设置时钟格式（24小时或12小时）； 2.计时器； 3.可以在我的提醒窗口查看，搜索，编辑，删除提醒，可以在新建提醒窗口新建提醒； 4.可设置闹钟时间，到点提醒，并播放非常好听的音乐； 5.显示当前时段，上午，下午，凌晨，晚上等； 6.使用文件系统保存，信息不会丢失； 7.托盘程序，最小化，关闭程序会将其隐藏到托盘，右键可退出。 特点： 1.学习价值大； 2.通过该实例可以增强对C#桌面程序开发的系统性理解。
HTML5-canvas-科技时钟
12-03
适合学习html5的小伙伴
基于HTML5 canvas的简单抽奖轮盘
12-12
在这个基于HTML5 Canvas的简单抽奖轮盘项目中，我们可以通过Canvas API来实现动态的视觉效果，例如旋转和动画，为用户提供一种交互式的抽奖体验。 首先，`index.html`是项目的主页面，它将包含HTML结构，包括canvas...
html2canvas 1.0.0-rc.5
07-27
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据...
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
我将尝试通过创建一系列教程来解决此问题，以说明文本编辑器的所有重要方面，同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表： 键盘光标导航和选择； ...
抖音八卦时钟
05-03
抖音八卦时钟，利用canvas画布制作最近比较火的抖音八卦时钟，效果不佳，轻喷
java时钟源代码
12-18
好看的java时钟小程序。 附加上背景图，背景图可自己另行 编辑个，加载到程序里。
桌面时钟源代码
06-16
这个是桌面时钟源代码，运行环境vc++6.0。可以全屏显示。
动态钟表C源代码
09-30
利用C语言在图形模式下编写的代码，显示出来的是一个动态钟表，时针、分针和秒针都能动，可以作为一个大型程序的入口界面
罗盘时钟HTML源码下载
07-09
罗盘时钟
基于HTML5 canvas的简单抽奖轮盘特效代码.zip
11-21
在本压缩包中，“基于HTML5 canvas的简单抽奖轮盘特效代码”是一个利用HTML5的canvas元素实现的互动抽奖轮盘效果。canvas是HTML5中的一个画布标签，允许开发者通过JavaScript进行像素级别的图像处理，创建丰富的动态...
Javascript 实现[网红] 时间轮盘
weixin_30945039的博客
04-23 1350
话不多说，先上图。 成品链接 大致效果如上图，接下来就开始制作吧。 HTML部分： 我们需要将容器旋转rotate使之以圆点为中心。 怎么转呢，请看图。 将同一级的容器用一个大的容器包裹起来，绝对定位。这时，所有的子容器会重合在一起。 然后我们用360°去除以子容器个数，可以得到每个子容器的角度差，采用角度差来旋转每个容器。 效果如图： 我们可以看到...
【HTML5】——canvas画转盘
茨时代べ 的博客
10-24 228
由于本人才疏学浅，这个代码只能第一次有效，第二次就不对了。 如果有大佬帮忙改正一下，小弟将感激不尽。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> but...
html5 抽奖效果,基于HTML5 canvas的简单抽奖轮盘
06-07
好的，下面是一个基于HTML5 canvas的简单抽奖轮盘的实现： HTML 部分： ```html <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>HTML5抽奖轮盘 #canvas { margin: 0 auto; display: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值