html5--5-8 繪製圓/弧

時間 2019-11-20

標籤 html5 html 繪製欄目 HTML5 简体版

原文原文鏈接

html5--5-8 繪製圓/弧

學習要點

掌握繪製圓弧的方法

矩形的繪製方法javascript

rect(x,y,w,h)建立一個矩形
strokeRect(x,y,w,hx,y,w,h) 繪製矩形（無填充）
fillRect(x,y,w,h) 繪製"被填充"的矩形
stroke() 繪製已定義的路徑
fill()繪製一個實心的（帶填充的圖形）

Canvas的路徑方法css

moveTo() 定義繪製路徑的起點(在直線中就是定義直線的起點)
lineTo() 添加一個新點，(在咱們的直線案例中就是定義直線的終點，可是後邊繼續繪製的話，它就變成中間點)
stroke() 繪製已定義的路徑
fill()繪製一個實心的（帶填充的圖形）
beginPath() 用來建立新的路徑
closePath() 從當前點回到起始點的來封閉路徑
arc(x,y,r,開始角度，結束角度，true/false) ：建立圓弧/曲線（用於建立圓形或部分圓）

繪製直線段流程:html

在HTML5文檔中添加canvas元素，而且設置的寬高和ID
在canvas元素中添加提示語句，讓不支持canvas的瀏覽器可以顯示友好的提示語句
添加script元素
獲取畫布/設置繪圖繪圖環境：此爲固定語句，暫時記住、瞭解便可，後續課程還會繼續講解

指定線寬:lineWidth= 數值
指定顏色：strokeStyle=顏色值（只適用用輪廓，線段等，填充色用：fillStyle=顏色值

設定起點：moveTo(x座標,y座標)
設定終點：lineTo(x座標,y座標)
開始繪製：stroke()

繪製矩形流程：html5

在HTML5文檔中添加canvas元素，而且設置的寬高和ID
在canvas元素中添加提示語句，讓不支持canvas的瀏覽器可以顯示友好的提示語句
添加script元素
獲取畫布/設置繪圖繪圖環境：此爲固定語句，暫時記住、瞭解便可，後續課程還會繼續講解

繪製空心矩形

指定線寬:lineWidth= 數值
指定輪廓顏色：strokeStyle=顏色值（只適用用輪廓，線段等，填充色用：fillStyle=顏色值
設定矩形的基本參數：strokeRect(x,y;width,height)

繪製填充矩形

指定填充顏色：fillStyle=顏色值（只適用用輪廓，線段等，填充色用：fillStyle=顏色值
設定矩形的基本參數：fillRect(x,y;width,height)

繪製圓java

在HTML5文檔中添加canvas元素，而且設置的寬高和ID
在canvas元素中添加提示語句
添加script元素
獲取畫布/設置繪圖繪圖環境
指定線寬:lineWidth= 數值
指定顏色：fill/strokeStyle=顏色值（只適用用輪廓，線段等，填充色用：fillStyle=顏色值
設定圓的基本參數：

圓心的座標:x,y
圓的半徑：數值
起始弧度和終止弧度：角度值1，角度值2
繪製方向：true（逆時針）/false（順時針）

開始繪製：stroke()/fill（）

實例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>無標題文檔</title>
 6 </head>
 7 
 8 <body>
 9 </body>
10 </html><!DOCTYPE html>
11 <html lang="en">
12 <head>
13     <meta charset="UTF-8">
14     <title>Document</title>
15     <style type="text/css">
16         canvas{background: #A9A9A0}
17     </style>
18 </head>
19 <body>
20     <canvas id="mycanvas" width="500px" height="300">
21         您的瀏覽器暫不支持HTML5的canvas元素！！
22     </canvas>
23     <script type="text/javascript">
24         //定義變量獲取畫布DOM
25         var canvas=document.getElementById("mycanvas");
26         //設置繪畫環境爲2d
27         var context=canvas.getContext("2d");
28         context.lineWidth=10;
29         context.strokeStyle="#00FFFF";
30         context.fillStyle="#F000F0";
31         context.arc(100,50,30,0,Math.PI*2);
32         context.stroke();
33         
34         context.beginPath();
35         context.arc(200,50,30,0,Math.PI*2);
36         context.fill();
37         
38         context.beginPath();
39         context.arc(200,150,30,0,Math.PI*2);
40         context.fill();
41         
42         context.beginPath();
43         context.arc(200,150,30,0,Math.PI*2);
44         context.stroke();
45         
46         context.beginPath();
47         context.arc(300,50,30,0,Math.PI/3);
48         context.fill();
49         
50         context.beginPath();
51         context.arc(400,50,30,0,Math.PI/3,true);
52         context.fill();
53         
54         context.beginPath();
55         context.arc(300,150,30,0,Math.PI/3);
56         context.stroke();
57         
58         context.beginPath();
59         context.arc(400,150,30,0,Math.PI/3,true);
60         context.stroke();
61         
62         context.beginPath();
63         context.lineWidth=2;
64         context.arc(100,250,30,0,Math.PI/3,true);
65         context.closePath();
66         context.stroke();
67     </script>
68 </body>
69 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。