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. UEditor可以如何直接复制word的图文内容到编辑器中

    如何做到 ueditor批量上传word图片? 1.前端引用代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  2. phpexcel如何读和写大于26列的excel

    主要运用到PHPExcel_Cell类的两个方法 1读取excel大于26列时. PHPExcel_Cell::columnIndexFromString($highestColumm)://由列名转 ...

  3. Oracle数据库字符集问题

    Oracle数据库的字符集问题,也涉及作为服务器操作系统的CentOS或者Windows的字符集与Oracle字符集之间的关联关系Oracle的字符集,这个问题的提出是因为两个原因:一是遇到一个DMP ...

  4. 【转】excel音标乱码

    源地址:https://zhidao.baidu.com/question/204553900.html 百度一个音标字体文件,下载后再拷贝到C:\WINDOWS\FONTS目录下面就可以了 下载地址 ...

  5. C# get和set

    Day1:知识点 1.封装 自己的理解: 可复用,低耦合.就是拿过来就用 只需要关注名称,返回值,参数及参数类型,不需要知道里面怎么实现的. 字段封装的快捷键 (ctrl+r+e)  将光标放在将要封 ...

  6. 修改mac下homebrew的源 加快下载速度

    把源改为清华的镜像 # HOMEBREW_BOTTLE_DOMAIN就是目标源 修改这个路径就可以里 echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirro ...

  7. 125、TensorFlow计算图的执行

    # TensorFlow使用tf.Session类来表示客户端程序之间的链接 # 虽然一个在其他语言中相似的接口也是可以使用的,列如C++ runtime # 一个tf.Session对象提供了访问本 ...

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

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

  9. 【HANA系列】SAP HANA的特点总结

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA的特点总结   ...

  10. oracle中not in 和 in的代替用法

    -- not in 的替代写法select col from table1 where col not in(select col from table2); select col,table2.co ...