整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
制圓形和圓弧都使用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小時內與您取得聯系。
