文档章节

html5 canvas绘制圆形进度实例

lotozhou
 lotozhou
发布于 2015/12/10 13:41
字数 132
阅读 58
收藏 0

html5 canvas绘制圆形进度实例

<canvas id="test" width=200 height=200></canvas>

 

<script>

    var canvas2d = document.getElementById("test").getContext("2d");

    var deg = 0;

    var test = function(deg){

        var r = deg*Math.PI/180;   //canvas绘制圆形进度

        canvas2d.clearRect(0,0,200,200);   //先清理

        canvas2d.beginPath();  //路径开始

        //canvas2d.fillStyle = "#fff"; //填充颜色

        canvas2d.strokeStyle = "#dddddd"; //canvas边框颜色

        canvas2d.lineWidth = 6; //线宽

        canvas2d.arc(100,100,50,0-90*Math.PI/180,r-90*Math.PI/180,false); //canvas绘制弧形

        //canvas2d.fill();

        canvas2d.stroke();

        //canvas2d.closePath();

    };
//使用定时器让html5 canvas绘制圆形进度动起来

    var t = setInterval(function(){

        deg+=10;

        test(deg);

        if(deg>360){

            clearInterval(t);

        }

        console.log(deg);

    },20);


© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
JavaEE——HTML5绘画

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 绘画是HTML5的新功能,以前是没有的,有flash的...

凯哥学堂
2017/10/30
0
0
绘制SVG内容到Canvas的HTML5应用

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起,...

xhload3d
2015/02/01
0
0
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
0
0
HTML5和CSS3新特性一览

HTML5和CSS3新特性一览 HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域。 <aside> 定义页面的侧边栏内容。 <bdi> 允许您设置...

全部原谅
07/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0
20180818 上课截图

小丑鱼00
今天
1
0
Springsecurity之SecurityContextHolderStrategy

注:下面分析的版本是spring-security-4.2.x,源码的github地址是: https://github.com/spring-projects/spring-security/tree/4.2.x 先上一张图: 图1 SecurityContextHolderStrategy的三个......

汉斯-冯-拉特
今天
1
0
LNMP架构(Nginx负载均衡、ssl原理、生成ssl密钥对、Nginx配置ssl)

Nginx负载均衡 网站的访问量越来越大,服务器的服务模式也得进行相应的升级,比如分离出数据库服务器、分离出图片作为单独服务,这些是简单的数据的负载均衡,将压力分散到不同的机器上。有时...

蛋黄_Yolks
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部