canvas 转盘文字

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

时间： 2024-11-09 00:07:21

canvas 转盘文字的相关文章

canvas粒子文字动画教程

1,什么是canvas粒子动画 canvas粒子文字动画效果绚丽,实现的方法和难点主要是根据缓动函数来确定粒子的轨迹. 2.主要实现步骤创建一个canvas,在canva上绘制文字或图片,然后获取像素的信息并生成一个粒子数组 var imageData = ctx.getImageData(0,0,canvas.width,canvas.height); ... var dotList = []; for(var x=0; x<imageData.width; x+=mass) { for(v

canvas动画文字效果

Doughnut Chartvar c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.font="50px sans-serif";ctx.fillText("75%",40,92);//ctx.clearRect(40, 52, 74, 68); var c=document.getElementById("canvas"

js 利用canvas 生成文字图片

// text,需要生成的文字 // font,字体样式 drawLogo: function(text, font) { // 创建画布 let canvas = document.createElement('canvas'); // 绘制文字环境 let context = canvas.getContext('2d'); // 设置字体 context.font = font; // 获取字体宽度 let width = context.measureText(text).width;

canvas转盘抽奖的实现(一)

网络上已经有了很多转盘抽奖的代码,但大多是用jQuery插件实现的,其中的原理比较难弄明白,于是自己摸索了一个.最终效果如下: 实现步骤: 1.根据奖品数量绘制转盘 var r1 = 200, //外圆半径 r2 = 160, //奖品文字距离圆心的位置 r3 = 60, //中心按钮半径 centerX = c.width / 2, //中点 centerY = c.height / 2, PI = Math.PI, prizeList = ['一等奖','二等奖','三等奖','四等奖','

canvas转盘抽奖

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>html5 canvas圆形转盘抽奖特</title> 6 </head> 7 <body> 8 <div style="w

android canvas drawText()文字居中

近期也是在学习自己定义控件,曾经仅仅自己随便玩了下,一直认为比較难,正好如今工作轻松,每天闲着就看看书看看帖子学习自己定义控件,你还别说自己定义控件学起来还是蛮有趣的!! 这里也跟大家分享下我关于drawText()文字居中的方法. 先附上drawText()的方法说明说实话当时看了这个,我也没明确这个x,y坐标究竟表达的啥意思,还一直以为是绘制文字中心的坐标,后来发现这个理解是错误的要想理解这个首先看张图像图上这样安卓的文字绘制是相对于基线绘制的,也就是图中的红线,而top+bottom

canvas实现文字分行

//paint.setColor(Color.WHITE);//paint.setTextSize(TEXT_SIZE*density);//paint.setAlpha(0x40);//paint.setTypeface(Typeface.create("System",Typeface.BOLD));//canvas.drawText("将大象单车上的二维码放入框内\n获取开锁密码", frame.left, ..//(float(frame.bottom +

Canvas实现文字粒子化，并且绕轴旋转（完善）

1. 之前有放过一个初始版本,但是因为在旋转的时候,有比较大的瑕疵,造成每个点运动到端点后,出现类似撞击的感觉. 2. 所以本文对旋转作了些调整,运用类似水平方向的圆周运动 a. HTML代码,定义canvas标签 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content

html5 canvas显示文字（写上5个字，纪念我那刚刚逝去的爱情）