Advertisement

html canvas 绘制转盘(HTML5 Canvas版本),Canvas 制作转盘

阅读量:

思路:

1、首先构建一个扇形结构,借助循环机制完成整个转盘的绘制过程

2、运用setInterval()函数实现转盘的持续旋转效果

3、在转盘表面标注相应的文字信息

4、当转盘停止转动时,读取其当前所指的文字内容并进行展示

c890d3e532a19ee2e202f929ef290cb5.png

html>

Document

body{background: #FF9933;}

span{

width:50px;

height: 30px;

line-height: 30px;

color:#F8F8F8;

background: #CC3300;

border:1px solid #000;

text-align: center;

position: absolute;

top:350px;

left:430px;

cursor:pointer;

}

window.onload = function(){

var can = document.getElementById('canvas');

var span = document.getEl

全部评论 (0)

还没有任何评论哟~