canvas-繪制圓形

制圓形和圓弧都使用arc()方法：

Arc(x, y, r, startAngle, endAngle, antiClockwise)

Arc()方法是從(x,y)位置畫出半徑為r的圓形;

startAngle及endAngle決定圓弧的起點角度與終點角度; startAngle: 起點是X軸方向, 即3點鐘方向。

antiClockwise參數(shù)決定是否已逆時針方向繪圖,逆時針為true,順時針為false。

在canvas中所有涉及角度的坐標(biāo)系有兩點注意的：

0弧度的方向是正右方向。

弧度的順時針和逆時針：

角度與弧度轉(zhuǎn)公式

角度轉(zhuǎn)弧度 π/180×角度

弧度變角度 180/π×弧度

將角度轉(zhuǎn)換為弧度,計算公式可以參考下面的公式：

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"; //設(shè)定邊框顏色
ctx.lineWidth=10; //設(shè)定線條寬度 10px
ctx.fillStyle="#FF0000"; //設(shè)定填充顏色
ctx.beginPath(); //路徑開始
ctx.arc(100,100,50,0,Math.PI*2,true); //起始點(100,100)半徑50的圓
ctx.closePath(); //關(guān)閉路徑
ctx.fill(); //繪出填滿圖形
ctx.stroke(); //繪出邊框
}
</script>
<!--style標(biāo)記內(nèi)是CSS語法-->
<style type="text/css">
Canvas { border: 1px solid black; } //將框線設(shè)為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";   //設(shè)置填充顏色
ctx.fill(); //填充顏色
</script>
</html>

繪制笑臉

果圖

在渲染頁面的過程中，進(jìn)度條是我們最為常見的，有條形進(jìn)度條，圓環(huán)進(jìn)度條，圓形進(jìn)度條。今天，我們就來實現(xiàn)一下圓形進(jìn)度條。

用到的知識點：

1、transform：rotate；（旋轉(zhuǎn)）

2、animation；（動畫關(guān)鍵幀）

首先，我們創(chuàng)建一個box，作為父級容器，定寬定高（160px），定位（position：relative）;

.box{

width: 160px;

height: 160px;

margin: 200px auto;

position: relative;

}

圓形進(jìn)度條，分為左右兩部分，利用時間差，通過動畫關(guān)鍵幀來達(dá)到進(jìn)度效果。

接下來，我們首先實現(xiàn)左側(cè)部分，創(chuàng)建一個div，類名為left-box，定寬定高（80px，160px）；定位（position：absolute）；

在left-box下創(chuàng)建一個div為子元素，類名為left-tran 和 left。接下來，設(shè)置left-tran樣式。

我們要明白，進(jìn)度條的實現(xiàn)是通過時間差，改變邊框的顏色。通俗一點：就是一個div，width和height都為0px；邊框?qū)挾仍O(shè)為100%；然后top和left為一組，bottom和right為一組，分別設(shè)置不同的顏色。效果如下圖：

接下來。將父級設(shè)置overflow：hidden。超出部分隱藏。這樣就只顯示一半的邊框，隨后便利用transform：rotate旋轉(zhuǎn)45deg，邊框邊圓角得到最終效果，如下圖：

最后設(shè)置關(guān)鍵幀，不同的邊框顏色就會相互轉(zhuǎn)變

這樣。左側(cè)的樣式就已經(jīng)完成，右側(cè)的與之相似，這里，我們就不在這里多加描述。

待完成右側(cè)樣式，兩個關(guān)鍵幀動畫相互協(xié)調(diào)，就可以完成一個圓形進(jìn)度條啦。

今天的全部代碼如下：

<!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>

進(jìn)度條，結(jié)合和時間戳，就可以很好的完成一個完美的時間進(jìn)度條了。

希望今天的知識點對大家有所幫助。

在線咨詢

上一篇：免費的報表工具—JimuReport 積木報表 v1.6.4 穩(wěn)定版本發(fā)布
下一篇：CSS奇思妙想-寫CSS的一些奇怪套路你都會哪些？（下篇）

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

canvas-繪制圓形

1、transform：rotate；（旋轉(zhuǎn)）

2、animation；（動畫關(guān)鍵幀）

您的項目需求