整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
制圆形和圆弧都使用arc()方法：
Arc(x, y, r, startAngle, endAngle, antiClockwise)
Arc()方法是从(x,y)位置画出半径为r的圆形;
startAngle及endAngle决定圆弧的起点角度与终点角度; startAngle: 起点是X轴方向, 即3点钟方向。
antiClockwise参数决定是否已逆时针方向绘图,逆时针为true,顺时针为false。
在canvas中所有涉及角度的坐标系有两点注意的：
0弧度的方向是正右方向。
弧度的顺时针和逆时针：
角度与弧度转公式
角度转弧度 π/180×角度
弧度变角度 180/π×弧度
将角度转换为弧度,计算公式可以参考下面的公式：
radians = degrees * Math.PI/180
degrees 角度
radians 弧度
圆的弧度(360)：360 * Math.PI/180 = Math.PI * 2 = 6.28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制圆</title>
<script type="text/javascript">
function drawCircle(){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//开始绘图--圆
ctx.strokeStyle="#336600"; //设定边框颜色
ctx.lineWidth=10; //设定线条宽度 10px
ctx.fillStyle="#FF0000"; //设定填充颜色
ctx.beginPath(); //路径开始
ctx.arc(100,100,50,0,Math.PI*2,true); //起始点(100,100)半径50的圆
ctx.closePath(); //关闭路径
ctx.fill(); //绘出填满图形
ctx.stroke(); //绘出边框
}
</script>
<!--style标记内是CSS语法-->
<style type="text/css">
Canvas { border: 1px solid black; } //将框线设为1px
</style>
</head>
<body>
<input type="button" value=" 画 圆 " onclick="drawCircle();"><br />
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>绘制圆弧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绘制圆弧</title>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d");
ctx.beginPath(); //开始绘制路径
// ctx.arc(100, 100, 60, 0, 6.28, false);
// ctx.arc(100, 100, 60, 0, -6.28, true);
ctx.arc(100, 100, 60, 0, Math.PI * 2, false);
ctx.stroke(); //显示路径线
ctx.fillStyle = "pink"; //设置填充颜色
ctx.fill(); //填充颜色
</script>
</html>
绘制笑脸
果图
在渲染页面的过程中，进度条是我们最为常见的，有条形进度条，圆环进度条，圆形进度条。今天，我们就来实现一下圆形进度条。
用到的知识点：
首先，我们创建一个box，作为父级容器，定宽定高（160px），定位（position：relative）;
.box{
width: 160px;
height: 160px;
margin: 200px auto;
position: relative;
}
圆形进度条，分为左右两部分，利用时间差，通过动画关键帧来达到进度效果。
接下来，我们首先实现左侧部分，创建一个div，类名为left-box，定宽定高（80px，160px）；定位（position：absolute）；
在left-box下创建一个div为子元素，类名为left-tran 和 left。接下来，设置left-tran样式。
我们要明白，进度条的实现是通过时间差，改变边框的颜色。通俗一点：就是一个div，width和height都为0px；边框宽度设为100%；然后top和left为一组，bottom和right为一组，分别设置不同的颜色。效果如下图：
接下来。将父级设置overflow：hidden。超出部分隐藏。这样就只显示一半的边框，随后便利用transform：rotate旋转45deg，边框边圆角得到最终效果，如下图：
最后设置关键帧，不同的边框颜色就会相互转变
这样。左侧的样式就已经完成，右侧的与之相似，这里，我们就不在这里多加描述。
待完成右侧样式，两个关键帧动画相互协调，就可以完成一个圆形进度条啦。
今天的全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.box {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
box-sizing: border-box;
}
.left-box{
width: 100px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box;
overflow: hidden;
}
.left-tran{
width: 0px;
height: 0px;
border: 100px solid;
box-sizing: border-box;
transform: rotate(45deg);
border-radius: 50%;
}
.left{
border-left: 100px solid #e3e4e5;
border-bottom: 100px solid #e3e4e5;
animation: leftmove 10s linear infinite;
}
@keyframes leftmove{
0%{
transform: rotate(45deg);
}
50%{
transform: rotate(45deg);
}
100%{
transform: rotate(225deg);
}
}
.right-box{
width: 100px;
height: 200px;
position: absolute;
top: 0px;
right: 0px;
box-sizing: border-box;
overflow: hidden;
}
.right-tran{
width: 0px;
height: 0px;
border: 100px solid;
position: absolute;
top: 0px;
right: 0px;
transform: rotate(45deg);
border-radius: 50%;
}
.right{
border-right: 100px solid #e3e4e5;
border-top: 100px solid #e3e4e5;
animation: rightmove 10s linear infinite;
}
@keyframes rightmove{
0%{
transform: rotate(45deg);
}
50%{
transform: rotate(225deg);
}
100%{
transform: rotate(225deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="left-box">
<div class="left-tran left"></div>
</div>
<div class="right-box">
<div class="right-tran right"></div>
</div>
</div>
</body>
</html>
进度条，结合和时间戳，就可以很好的完成一个完美的时间进度条了。
希望今天的知识点对大家有所帮助。
*请认真填写需求信息，我们会在24小时内与您取得联系。
