html5＜canvas操作文字实例之转盘＞

最新推荐文章于 2021-08-19 17:14:50 发布
最新推荐文章于 2021-08-19 17:14:50 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： HTML4/HTML5 文章标签： html5 canvas 大转盘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27682041/article/details/72779145
版权
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        canvas{
         background:#ccc;
        }
        </style>
        <script>
            window.onload = function(){
                var canvas = document.getElementById('canvas');
                var cobj = canvas.getContext('2d');//获取绘图环境
                cobj.translate(300, 300);
                var textArr = ['手机','电脑','相机','耳麦','蓝牙','眼镜','电视','电话'];
                //绘制扇形
                var colorArr = ['#434343','#ee1121','#905812','#543aa6','#54ccca','#34308e','#8880a1','#43543c'];
                var angle=0;
                var step = 1000+10*Math.random();
                var btn = document.getElementById('btn');
                btn.onclick = function(){
                    location.reload();
                }
                var t = setInterval(function(){
                    document.title = angle;
                    if(step <= 0.02){
                        clearInterval(t);
                        var textNum = Math.ceil((angle%360)/45);
                        var text = textArr[textArr.length - textNum-1];
                        cobj.font = "20px 微软雅黑";
                        cobj.textAlign = "center";
                        cobj.fillText("奖品是:"+text,0,0);
                    }else{
                        cobj.clearRect(-300,300,500,500);
                        cobj.beginPath();
                        cobj.lineWidth = 5;
                        cobj.moveTo(135, 0);
                        cobj.lineTo(145,0);
                        cobj.stroke();
                        cobj.lineWidth = 2;
                        cobj.save();
                        step *=0.98
                        angle +=step;//使角度增加量越来越少，加速度越来越小
                        cobj.rotate(angle*Math.PI/180);
                        for(var i=1;i<=8;i++){
                            cobj.beginPath();
                            cobj.moveTo(0,0);
                            cobj.fillStyle = colorArr[i-1];
                            cobj.arc(0,0,130,(i-1)*45*Math.PI/180,i*45*Math.PI/180);
                            cobj.closePath();
                            cobj.stroke();
                            cobj.fill();
                        }

                        //绘制中心小圆盘
                        cobj.beginPath();
                        cobj.fillStyle = 'white';
                        cobj.arc(0,0,60,0,2*Math.PI);
                        cobj.stroke();
                        cobj.fill();

                        //添加文字
                        for(var i=1;i<=8;i++){
                            cobj.save();
                            cobj.beginPath();
                            cobj.rotate((i*45+30)*Math.PI/180);
                            cobj.fillStyle = 'black';
                            cobj.font = "18px 微软雅黑";
                            cobj.textBaseline = "bottom";
                            cobj.fillText(textArr[i-1],75,0);
                            cobj.restore();
                        }
                        cobj.restore();
                    }
                }, 6);

            }
        </script>
    </head>
    <body>
    <canvas id="canvas" width=600 height=600>
    </canvas>
    <input type="button" value="点击" id="btn"/>
    </body>

</html>


sensus森森
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cnvas 抽奖转盘弧形文字
placebo1996的博客
01-15 1152
canvas 实现环形文字,使抽奖转盘内容可配置
用HTML5的Canvas写字的例子
qjoycn
09-05 387
最近项目轻松了一些，就抱着学习的态度阅读了HTML Canvas 2D Context的内容。又想到以前曾经在android上做过原笔迹手写的内容，就想试着在HTML5中简单做一下看看。摸索着完成了demo。下面是在Google Chrome 13.0版本上的效果。 下面附上代码，仅仅为学习，没做优化，作为例子吧。 &lt;html&gt; &lt;head&gt; &lt;...
canvas读取图片，输入文字，调整文字属性，拖拽文字位置，并保存图片
雨果的博客
08-19 5138
我不是专业的前端哦，可能写的不太好，见谅。 整体思路： 共有5层，除了背景颜色的div没什么用之外，canvas1用来读取图片作为背景，canvas2把文字展示出来，canvas3用来展示拖拽的文字，canvas4用来把canvas1背景图片和canvas3拖拽后的文字给画到一个canvas上，实现保存图片的目的。 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
canvas之转盘抽奖(所有问题总结)
RedXx
07-16 1982
转盘抽奖所遇问题总结   1.在我画圆形得时候遍历 为何逆时针与顺时针效果不同 &lt;script&gt; function draw() { let obj = document.getElementById("canvas"); let context = obj.getContext('2d'); var length = 6; for (let i = 0; i &lt;...
微信小程序画布画时针转盘
fatniuo_o的博客
01-24 3512
需求：使用微信小程序画一个12时辰的转盘，每两一个小时转盘上的指针跳动一次，每隔两个小时转盘分区跳动一次。 canvas.wxml <canvas class="canvas-element" canvas-id='turntableCanvas' style='width:{{canvaswidth}}px;height:{{canvasheight}}px
javascript+HTML5 Canvas绘制转盘抽奖
11-26
之前做过的项目中，有需要抽奖转盘功能的。项目已经完工一段时间了，也没出现什么严重的bug，所以现在拎出来分享给大家。 功能需求 ...2、使用canvas标签和对应的html5 api 进行操作。(canvas中文手册
html5 canvas圆形转盘抽奖特效.zip
07-11
总的来说，"html5 canvas圆形转盘抽奖特效"是一个结合了HTML5 Canvas绘图能力、JavaScript动画技巧和随机数生成的实例。通过学习和理解这个示例，开发者可以掌握如何创建类似的应用，增强网站的用户体验和互动性。
HTML5 Canvas 微信大转盘抽奖特效.rar
07-10
HTML5 Canvas实现微信大转盘抽奖特效，点击圆盘中心的“开始抽奖”按钮，抽奖就开始了，转盘指针旋转，最后指向的地方就是抽奖结果。不过这里要说明一下，本特效只是实现抽奖的前台部分，基于HTML5编写的，若要真正...
HTML5 Canvas指针大转盘抽奖代码.zip
07-11
总结，这个HTML5 Canvas指针大转盘抽奖代码是一个综合运用Canvas API、JavaScript事件处理、随机算法和样式定制的实例，对于学习和实践HTML5动画以及增强网页交互性具有很高的参考价值。开发者可以通过研究这个代码...
基于HTML5 Canvas大转盘随机抽奖特效源码.zip
最新发布
11-21
总的来说，这个源码包提供了一个完整的HTML5 Canvas抽奖应用实例，涵盖了Canvas绘图、动画制作、随机数生成以及可能的数据交互等多个方面的知识点。对于想要提升Web前端技能，尤其是对Canvas感兴趣的开发者来说，这...
canvas之转盘抽奖
RedXx
07-23 1646
                                           canvas之转盘抽奖           1.    整理      大概思路  初始化各种参数 =&gt; 绘制外层(图片) =&gt; 绘制餐品背景加内容 =&gt; 点击按钮 =&gt; click事件 =&gt; 回调函数(旋转结束后执行)      初始化参数:  function ini...
模拟大转盘自定义View
qq_43143422的博客
11-29 2241
MainActivity package com.example.circle_draw_demo03; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.animation.RotateAnimation...
Javascript - 使用原生动画与canvas制作抽奖圆盘
EricJeffrey的博客
07-20 574
HTML5中的canvas提供了使用JS脚本在网页上绘制图形的能力，传统的HTML对象往往只能作为矩形或者圆形容器存在，而直接使用图片又比较复杂，且需要适配不同分辨率。因此，本着试一试也不亏想法，作者使用canvas创建了一个抽奖圆盘，配合动画实现抽奖地效果，整个转盘封装成了一个类，并且提供了抽奖方法。
HTML5 Drag拖拽文字，生成标签
ND7758258的博客
07-12 5688
最近公司的项目想做一个拖拽生成标签的应用效果，在网上找了很多例子，都不能完成这个效果，自己就摸索了一下，再结合了大佬们的例子，做了一个简单的小demo；具体的效果如下：HTML和CSS就比较简单了，具体的样式大家可以自己进行编写~HTML：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="...
小程序 利用canvas 绘制幸运大转盘
qq_24678987的博客
07-05 2733
Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, restaraunts: [], //大转盘奖品信息 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { var self = this; wx.getSystemInfo({ ...
Core HTML5 Canvas 随书实例
jmshl的专栏
11-18 1368
Core HTML5 Canvas Examples Chapter 1: Essentials Example 1.1Example 1.3Example 1.4Example 1.5Example 1.8Example 1.9Example 1.11Example 1.13 Chapter 2: Drawing Example 2.1Example 2.2Example 2.3
使用canvas做一个抽奖转盘
jacoby_fire的博客
01-16 3967
最近，公司在每周五下午会有一次个人分享沙龙。上周我自愿参加了，因为每周都是由当前主讲人来决定下次的主讲人，于是就有做一个抽奖页面的想法，话不多说，先看效果。 点击抽奖之后，转盘的速度会由慢到快，然后由快到慢再停止，整个过程持续时间是3s,下面是代码 html lang="en"> head> meta charset="UTF-8"> title>抽奖title>
canvas一个简单粗暴的中奖转盘
weixin_33994444的博客
08-06 224
最近在学canvas做动画，于是就写个转盘练下手。上个简陋的成果图（中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈） 代码很简单，都注释了，直接上代码吧，嘤嘤嘤 html <body> <canvas id="canvas">您的浏览器不支持canvas</canvas> <img s...
canvas实例
lomenw的博客
03-27 2278
function draw(id){               var canvas = document.getElementById(id);               if(canvas == null)               return false;               var context = canvas.getContext('2d');//getCon
HTML5 Canvas自由拼图实例与实现详解
本文主要介绍的是如何在HTML5 Canvas上实现自由拼图的功能实例。HTML5 Canvas是HTML5中的一个重要元素，它提供了一种在网页上绘制图形的API，包括线条、形状、文本和图像等。在这个实例中，作者详细地讲解了如何利用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值