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. android 6.0适配（总结）

    6.0的适配主要是权限: 权限的分组: 普通权限:也就是正常权限,是对手机的一些正常操作,对用户的隐私没有太大影响的权限,比如手机的震动,网络访问,蓝牙等权限,这些权限会在应用被安装的时候默认授予,用 ...

  2. [tyvj]P1939玉蟾宫[单调栈]

    [tyvj]P1939 玉蟾宫 ——!x^n+y^n=z^n 背景 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉蟾宫宫主蓝兔盛情地款待了它们,并赐予它们一片土地. 描述 这 ...

  3. Apache服务器出现Forbidden 403错误提示的解决方法

    默认web目录/var/www/html 改成 /data/www出现403问题解决: vim /etc/apache2/apache2.conf <Directory /data/www/&g ...

  4. onLayout初始化裁剪信息

    在EasyConstraintLayout中初始化LayoutParamsData的paths @Override protected void onLayout(boolean changed, i ...

  5. jmeter常用组件简介

    本文主要介绍jmeter使用过程中最常用的一些组件及其作用.性能测试时线程组中可以添加如下的组件,如图所示: test plan:测试计划,是其它组件的容器 thread:线程组,用来设置多少线程,怎 ...

  6. p5414 [YNOI2019]排序

    分析 这是真正的云南oi/px 我们需要考虑保留一段不降子序列 剩余的自由往前往后移动 所以dp一下即可 代码 #include<bits/stdc++.h> using namespac ...

  7. CDN：分类

    ylbtech-CDN:分类 1.返回顶部 1. bootstrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目. 2. feather-icon ...

  8. 多个springboot项目部署到tomcat，Error deploying web application archive

    每个springboot单独部署到tomcat下可以正常启动,多个一个就发生异常 Error deploying web application archive 解决:配置文件加上配置区分 sprin ...

  9. Java 内部类“覆盖"

    Think in Java  P269 如果子类中的内部类和父类中内部类一样,这好像子类内部类“覆盖”了父类的内部类,但其实没有代表着什么. public class BigEgg extends E ...

  10. rsync+sersync实现文件同步

    一.目的 A服务器:11.11.11.11 源服务器 B服务器:22.22.22.22 目标服务器,既同步备份的目标 将A服务器的文件同步到B服务器上 二.rsync环境部署 1.关闭selinux, ...