1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>16-canvas繪製圓弧
title
>
6<
style
>7*
11canvas
16style
>
17head
>
18<
body
>
19<
canvas
width
="500"
height
="400"
>
canvas
>
20<
script
>
21/*
221.基本概念
23角度: 乙個圓360度, 乙個半圓是180度
24弧度: 乙個圓2π, 乙個半圓π
2526
2.角度轉換弧度公式:
27∵ 180角度 = π弧度
28∴ 1角度 = π/180;
29∴ 弧度 = 角度 * π/180;
3090角度 * π/180 = π/2
3132
3.弧度轉換角度公式:
33∵ π弧度 = 180角度
34∴ 1弧度 = 180/π
35∴ 角度 = 弧度 * 180/π
36π/2 * 180/π = 180/2 = 90度
37*
*/38
//1.拿到canvas
39let ocanvas
=document.queryselector(
"canvas");
40//
2.從canvas中拿到繪圖工具
41let octx
=ocanvas.getcontext("2d
");42/*
43x, y: 確定圓心
44radius: 確定半徑
45startangle: 確定開始的弧度 (0代表的是3點鐘那個位置的點)
46endangle: 確定結束的弧度
47boolean: 預設是false, false就是順時針繪製, true就是逆時針繪製
48context.arc(x, y, radius, startangle, endangle, boolean);
49*
*/50
octx.arc(
100,
100,
100,
0, math.pi);
51//
octx.arc(100, 100, 100, 0, math.pi, true);
52//
octx.arc(100, 100, 100, 0, math.pi * 2);
53octx.stroke();
54script
>
55body
>
56html
>
canvas 繪製圓弧
處理資料 let plan let zhanxian let chengjiao let x 200 let y 200 data.foreach d,i let datas zhanxian,chengjiao datas迴圈 datas.foreach arr,m else function d...
使用canvas繪製圓弧動畫
對於canvas的繪製，首先需要在html內指定一塊畫布，即,可以看做是在ps中新建乙個空白文件，之後所有的操作都將呈現在這個文件之上，與ps的區別是，canvas本身沒有圖層的特性，當需要展示不同維度的檢視時，需要交由html的位置關係來解決。canvas標籤上，值得一提的就是width和heig...
使用canvas繪製乙個圓或者圓弧
arc x,y,radius,startangle,endangle,anticlockwise 畫乙個以 x,y 為圓心的以radius為半徑的圓弧 圓 從startangle開始到endangle結束，按照anticlockwise給定的方向 預設為順時針 來生成。arc 函式中表示角的單位是弧...