畫布canvas標籤,並且在畫布上畫簡單的形狀

2021-07-16 03:00:59 字數 1415 閱讀 1213

今天整畫布,半天下來老是錯,結果:

id = 

'c1'

width=

"400"

height=

"400"

>

瀏覽器不支援

原來畫布的寬度和高度需要在標籤定義的時候確定,並且後面是不能帶有px這個單位的,比如:

錯誤的定義:
#c1

ogc.fillstyle = 'yellow'

;ogc.fillrect(10,10

,200

,100);

//(x,y,w,h)這個是畫一矩形,預設的填充的是黑色

還應該

知道的是這樣矩形填充的顏色必須在畫矩形之前做

ogc.

strokestyle

= 'red'

;//這個是表示劃線的顏色設定

這個也是畫乙個矩形,這個是預設沒有填充的,或者說是白色的

ogc.

strokerect

(10.5

,100.5

,100,80

);

ogc.

fillstyle

="green"

;

ogc.strokestyle="red"

;

ogc.beginpath();

//宣告

ogc.moveto(10

,20);

//開始位置

ogc.lineto(60

,80);

//目標位置

ogc.stroke();

ogc.lineto(100

,190);

ogc.stroke();

ogc.lineto(10

,20);

ogc.stroke();

ogc.fill();

//想要填充指定的顏色,需要用到fillstyle="green"

// 還有就是fill(),並且這個fill()是必須在所有的stroke執行之後才進行執行的

ogc.closepath();

在畫布上面畫線是,首先是beginpath(),moveto是起點,lineto是下乙個點

stroke()是表示執行畫

html

>

lang=

"en"

>

id="c1"

width=

"400"

height=

"400"

>

了解canvas畫布

一 什麼是 canvas?二 canvas基本使用 mycanvas width 300 height 300 canvas canvas畫布的預設尺寸是300 150 1 獲取到canvas元素 var c document.getelementbyid mycanvas 2 執行上下文 繪製畫筆...

學習canvas畫布

我們可以用畫布 canvas 繪製各種圖形,下面 是繪製的乙個圓形 doctype html html head title canvas畫布 title meta charset utf 8 meta name viewport content width device width,initial...

canvas畫布基本操作

簡單畫直線和三角形 結合注釋 線條繪製 canvas width 1024 height 768 style border 1px solid aaa display block margin 50px auto 當前瀏覽器不支援canvas,請更換瀏覽器後再試 canvas canvas是基於狀態...