canvas繪製矩形 三角形 圓形

2021-08-13 03:06:15 字數 2124 閱讀 4828

1、繪製矩形

charset="utf-8">

canvas繪製矩形title>

canvas

style>

window.onload = function

();

script>

head>

id="canvas1"

width="600"

height="300">

canvas>

body>

html>

效果如下:

方法詳解:

context.fillrect(x,y,width,height);
其中(x,y)是矩形的起點的座標,width,height分別定義矩形的寬和高。

2、繪製三角形

charset="utf-8">

canvas描繪三角形title>

canvas

style>

window.onload = function

();

script>

head>

id="canvas2"

width="600"

height="300">

canvas>

body>

html>

效果如下:

3、繪製圓形

charset="utf-8">

canvas繪製圓形title>

canvas

style>

window.onload = function

();

script>

head>

id="canvas3"

width="600"

height="300">

canvas>

body>

html>

效果如下:

方法詳解:

context.arc(x,y,radius,startangle,end

angle,direction);

x,y:確定圓心在畫布上的座標;

radius:定義圓的半徑;

startangle,endangle:弧的起始角和終止角確定了路徑在圓上的起點和終點;

direction:角可以按照逆時針度量(角度是負的,如」-45°「),也可以按照順時針度量(角度是正的,如」45°「),如果direction為true,就逆時針畫弧,如果direction為false,就順時針畫弧。

degreestoradians(degrees)方法詳解:

在畫布中,角的單位都用弧度表示,而不是度,因此定義degreestoradians(degrees)方法,將角度轉換為弧度。

function

degreestoradians

(degrees)

因此,在上邊繪製圓形的例子中,context.arc(150,150,50,0,2*math.pi,true);也可以表示為context.arc(150,150,50,0,degreestoradians(360),true);4、乙個例子

為了在畫布上實現如下效果:

**如下:

charset="utf-8">

css繪製向左三角形 CSS繪製三角形

1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度,不知大家是否想乙個問題,相鄰的線條邊界在哪,下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...

CSS繪製三角形

利用css繪製三角形 並應用在相應的場景中,減少的使用,可提高載入速率,降低http請求次數 在同一方向上,大致有三種繪製方式,繪製出來的有兩種規格 在保持寬度不變的情況下 對比圖 假定給第乙個三角形命名為 1,則第二第三個分別為 2,3 先從第三個最小面積的說起,如下 height 0 width...

Qt OpenGL 繪製三角形

一 效果圖 二 ifndef widget h define widget h include include include include include include class widget public qopenglwidget,protected qopenglfunctions e...