html5 canvas绘制圆形进度实例

2019独角兽企业重金招聘Python工程师标准>>>

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);

转载于:https://my.oschina.net/zhouhang0907/blog/541985

html5 canvas绘制圆形进度实例相关推荐

canvas 绘制圆形进度条
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html5 canvas绘制圆形印章，以及与页面交互
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 < ...
android绘制环形进度_Android使用Canvas绘制圆形进度条效果
前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas ...
使用canvas绘制圆形进度条
实现步骤: 绘制一个圆: 绘制圆环: 绘制进度环: 绘制文字: 一.创建画布 <canvas id='myCanvas' width='200' height='200'></can ...
html5虚线绘制的函数,HTML5 Canvas绘制圆点虚线实例
html5 canvas 提供了很多图形绘制的函数,但是很可惜,canvas api只提供了画实线的函数(lineto),却并未提供画虚线的方法.这样的设计有时会带来很大的不便,<javascr ...
php 画虚线,HTML5 Canvas绘制圆点虚线实例_html5教程技巧
HTML5 Canvas 提供了很多图形绘制的函数,但是很可惜,Canvas API只提供了画实线的函数(lineTo),却并未提供画虚线的方法.这样的设计有时会带来很大的不便,<JavaScr ...
使用h5 canvas绘制圆形进度条
创建一个Html容器canvas: <canvas id="myCanvasTag" width="300" height="300" ...
html 画圆点代码,HTML5 Canvas绘制圆点虚线实例
HTML5 Canvas 提供了很多图形绘制的函数,但是很可惜,Canvas API只提供了画实线的函数(lineTo),却并未提供画虚线的方法.这样的设计有时会带来很大的不便,<JavaScr ...
H5 Canvas绘制圆形进度条动画效果
效果如图效果比较简单 html结构部分 <canvas id="canvas" width="110" height="110"&g ...

html5 canvas绘制圆形进度实例

html5 canvas绘制圆形进度实例相关推荐

最新文章

热门文章