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. linux运维、架构之路-HTTP服务

    一.HTTP协议 1.介绍 HTTP协议,全称HyperText Transfer Protocol,中文名为超文本传输协议,是互联网中最常用的一种网络协议.HTTP协议是互联网上常用的通信协议之一. ...

  2. php中ajax的使用实例讲解

    一.总结 1.多复习:代码都挺简单的,就是需要复习,要多看 2.ajax原理:ajax就是部分更新页面,其实还在的html页面监听到事件后,然后传给服务器进行操作,这里用的是get方式来传值到服务器, ...

  3. ubuntu18.04-安装最新cmake

    https://www.linuxidc.com/Linux/2018-09/154165.htm

  4. 【HDOJ6635】Nonsense Time（时间倒流，lis）

    题意:给定n个数的数列,第i个数为a[i],刚开始所有位置都处于禁用状态,第i次之后位置p[i]变为可用,求每次变化后的lis长度 n,a[i],p[i]<=5e4 保证a[i],p[i]均为随 ...

  5. MapServer教程2

    第二章 Tutorial 教程 MapServer Tutorial MapServer教程 Tutorial background 教程背景 Section 1: Static Maps and t ...

  6. composer国内镜像

    composer国内镜像 一.总结 一句话总结: 直接百度 “composer 国内镜像” 即可 直接运行:composer config -g repo.packagist composer htt ...

  7. isset、empty 误区

    isset()  常用来判定变量是否存在  但是当变量赋值为NUll时候,返回值一样是FALSE  而实际上变量是存在的,与实际情况不符,判定错误. empty() 用来判定变量或者类的属性值是否为等 ...

  8. TNS-12535

    Fatal NI connect error 12170. VERSION INFORMATION: TNS for Linux: Version 11.2.0.3.0 - Production Or ...

  9. Java日期处理类的相关使用

    java常用类-java日期处理类 Date类 Date类是jdk给我们提高的标准日期类,在java.util包下: 示例代码: import java.util.Date; public class ...

  10. leetcode 189. 旋转数组（python）

    给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [1,2,3,4,5,6,7] 和 k = 3输出: [5,6,7,1,2,3,4]解释:向右旋转 1 步: ...