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. CF613D Kingdom and its Cities 虚树 + 树形DP

    Code: #include<bits/stdc++.h> #define ll long long #define maxn 300003 #define RG register usi ...

  2. Android逆向之旅---基于对so中的section加密技术实现so加固

    一.前言 好长时间没有更新文章了,主要还是工作上的事,连续加班一个月,没有时间研究了,只有周末有时间,来看一下,不过我还是延续之前的文章,继续我们的逆向之旅,今天我们要来看一下如何通过对so加密,在介 ...

  3. CSS实现回到顶部图片hover后改变效果

    任何网站中回到顶部元素不可缺少,一般为了实现交互效果,都会在鼠标hover后元素样式有所改变.今天这个实例便是采用CSS中的transform知识实现. hover: <!DOCTYPE htm ...

  4. JMeter 分布式调度压测部署

    我们遇到jmeter被假死死了,这里有2个原因,一是jmeter原本是java写的,heap受硬件限制需要调优,二是单机无法分解超大并发比如100万+并发压测,因此,我们分二部走,首先我们需要进行jm ...

  5. 云计算openstack共享组件——Memcache 缓存系统

    一.缓存系统 静态web页面: 1.工作流程: 在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Reques ...

  6. poj3126Prime Path （BFS+素数筛）

    素数筛:需要一个数组进行标记 最小的素数2,所有是2的倍数的数都是合数,对合数进行标记,然后找大于2的第一个非标记的数(肯定是素数),将其倍数进行标记,如此反复,若是找n以内的所有素数,只需要对[2, ...

  7. 【linux】 mail/mutt 发送邮件

    mail: 比较常用,缺点是发送附件要同时安装其他软件: mutt:功能强大,注意发送html需要升级到1.5+版本:   用mail发送邮件: echo "邮件正文" | mai ...

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

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

  9. php跨域的几种方式

    PHP实现跨域的几种形式 1.JSONP(JSON with padding)原理 利用html里面script标签可以加载其他域下的js这一特性,使用script src的形式来获取其他域下的数据, ...

  10. HTML批量修改——正则表达式实践

    目录 1.问题描述 2.初步研究 3.进一步研究 3.1提取2.*中的序号* 3.2提取标题 3.3选取全文 3.4替换 参考资料 1.问题描述 如下所示的一段HTML代码: ... <h2 a ...