<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
background:#9AA4FF;
}
</style>
</head>
<body>
<h3>canvas画布:绘制路径——圆拱</h3>
<canvas id="HuaBu">
您的浏览器不支持canvas画布
</canvas>
<script src="js/jquery-1.11.1.js"></script>
<script>
var w=600;
var h=600;
HuaBu.width=w; //画布的宽
HuaBu.height=h; //画布的宽
//创建画布
var ctx=HuaBu.getContext("2d");
//绘制灰色的圆环
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.strokeStyle="#aaa";
ctx.lineWidth=15;
ctx.stroke();
//绘制彩色的进度环
var start=-Math.PI/2;
var deg=0; //进度环前进的角度
ctx.font="20px SimHei";
var tim
canvas:绘制动画——圆环进度条
最新推荐文章于 2024-08-19 13:13:12 发布