canvas.js

window.onload=function() {

    var canvas=document.getElementById('canvas');

     var ctx=canvas.getContext('2d');

     var btn=document.getElementById('btn');

     var angle=0;

     btn.onclick=function() {

         location.reload();

     };

         var step=10+10*Math.random();

         var t= setInterval(function() {

             if(step<=0.3)  {

                 clearInterval(t);

                 var num1=Math.ceil(angle/45);

                 var con= (textArr[textArr.length-num1]);

                 ctx.font = "20px  微软雅黑 ";

                 ctx.textAlign="center";

                 ctx.fillText(con,0,0);

             }else {

                 if (angle >= 360) {

                     angle = 0;

                 }

                 step *= 0.95;

                 angle+=step;

                 ctx.clearRect(-200, -200, 500, 500);

                 ctx.beginPath();

                 ctx.lineWidth = 5;

                 ctx.moveTo(130, 0);

                 ctx.lineTo(150, 0);

                 ctx.stroke();

                 ctx.lineWidth = 2;

                 ctx.save();

                 ctx.rotate(angle * num);

                 for (var i = 1; i <= 8; i++) {

                     ctx.beginPath();

                     ctx.moveTo(0, 0);

                     ctx.arc(0, 0, 130, (i - 1) * 45 * num, i * 45 * num);

                     ctx.fillStyle = colorArr[i - 1];

                     ctx.closePath();

                     ctx.stroke();

                     ctx.fill();

                 }

                 ctx.beginPath();

                 ctx.fillStyle = "#fff";

                 ctx.arc(0, 0, 60, 0, 360 * num);

                 ctx.fill();

                 for (var i = 0; i <= 7; i++) {

                     ctx.save();

                     ctx.beginPath();

                     ctx.rotate((i * 45 + 20) * num);

                     ctx.fillStyle = "black";

                     ctx.font = "15px  微软雅黑 ";

                     ctx.fillText(textArr[i], 70, 0);

                     ctx.restore();

                 }

                 ctx.restore();

             }

         },60);

    var num=Math.PI/180;

     ctx.translate(250,250);

     var colorArr=["#B23AEE","#BC8F8F","#A0522D","#8B1A1A","#FF4500","#FFFF00","#8B8B7A","#00EE00"];

     var textArr=["PHP","HTML5","JAVA","JS","CSS","CSS3","JQUERY","HTML"];

};

　　canvas.html

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>实例</title>

    <script  type="text/javascript"  src="canvas.js"></script>

    <style>

        canvas {

            background: #eeeeee;

        }

    </style>

</head>

<body>

<canvas id="canvas" width="500" height="500"></canvas>

<input type="button"   value="开始" id="btn">

</body>

</html>

　　效果：

2017-09-11  12:06:02

canvas 转盘文字的更多相关文章

  1. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  2. 小程序canvas中文字设置居中锚点

    小程序中经常会遇到要生成图片的需求,图片一般会加上用户的头像和昵称之类的,头像只需要把腾讯域名添加到request和download列表中,使用wx.getImageInfo()就可以缓存到本地,成功 ...

  3. canvas 画布 文字描边

    总结一下,canvas 画布 文字描边的2种方法以及其不同的视觉效果: 效果图: 具体代码: <canvas id="canvas" width="800" ...

  4. canvas转盘抽奖的实现(二)

    本篇是<canvas转盘抽奖的实现(一)>的另一种实现方法,主要通过css3的transform以及transition过渡来实现.     // ' + r + '等奖'; } draw ...

  5. 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

  6. canvas转盘抽奖

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...

  7. canvas转盘抽奖的实现(一)

    网络上已经有了很多转盘抽奖的代码,但大多是用jQuery插件实现的,其中的原理比较难弄明白,于是自己摸索了一个.最终效果如下:     // = totalTime) { stopRotation() ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. canvas绘制文字

    绘制字体时可以使用fillText方法或者strokeText方法. fillText方法用填充的方式来绘制字符串 context.fillText (text, x,y,[maxwidth]); s ...

随机推荐

  1. SQL Server查询使用键查找时锁申请及释放顺序

    当然看的过程中,其实自己有个疑问: 对于键查找这类查询,会申请哪些锁,锁申请和释放的顺序是怎样的? 准备 备注:测试表仍然使用高兄文中创建的测试表testklup 在开始之前,使用dbcc ind 命 ...

  2. Codeforces Round #608 (Div. 2) E - Common Number (二分 思维 树结构)

  3. 洛谷 P4300 BZOJ 1266 [AHOI2006]上学路线route

    题目描述 可可和卡卡家住合肥市的东郊,每天上学他们都要转车多次才能到达市区西端的学校.直到有一天他们两人参加了学校的信息学奥林匹克竞赛小组才发现每天上学的乘车路线不一定是最优的. 可可:“很可能我们在 ...

  4. Cluster基础(四)：创建RHCS集群环境、创建高可用Apache服务

    一.创建RHCS集群环境 目标: 准备四台KVM虚拟机,其三台作为集群节点,一台安装luci并配置iSCSI存储服务,实现如下功能: 使用RHCS创建一个名为tarena的集群 集群中所有节点均需要挂 ...

  5. Flask-SQLALchemy动态的filter_by和filter

    1.filter_by filter_by用于查询简单的列名,不支持比较运算符. filters = {'name': 'fengyao', 'age': 26} User.query.filter_ ...

  6. day25—JavaScript实现文件拖拽上传案例实践

    转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...

  7. RSA - 原理、特点（加解密及签名验签）及公钥和私钥的生成

    Wiki - RSA加密演算法 Wiki - 欧拉函数 Wiki - 模反元素 ASN.1 格式标准 RSA算法原理(二) 注意: RSA 加密或签名后的结果是不可读的二进制,使用时经常会转为 BAS ...

  8. poj2718Smallest Difference （穷竭搜索）

    escription - 题目描述 给定若干位十进制数,你可以通过选择一个非空子集并以某种顺序构建一个数.剩余元素可以用相同规则构建第二个数.除非构造的数恰好为0,否则不能以0打头. 举例来说,给定数 ...

  9. JAVA泛型知识（二）--> <? extends T>和<? super T>

    <? extends T> 和 <? super T> 是Java泛型中的“通配符(Wildcards)” 和 “边界(Bounds)”的概念 <? extends T& ...

  10. 排序算法四：快速排序(Quicksort)

    快速排序(Quicksort),因其排序之快而得名,虽然Ta的平均时间复杂度也是O(nlgn),但是从后续仿真结果看,TA要比归并排序和堆排序都要快. 快速排序也用到了分治思想. (一)算法实现 pr ...