Html5筆記之第六天

2021-07-25 14:39:20 字數 1487 閱讀 3874

標籤定義圖形,比如圖表和其他影象,您必須使用指令碼來繪製圖形。

在畫布上(canvas)畫乙個紅色矩形,漸變矩形,彩色矩形,和一些彩色的文字。

注意:標籤通常需要指定乙個id屬性 (指令碼中經常引用), width 和 height 屬性定義的畫布的大小.

你的瀏覽器不支援 html5 canvas 標籤。

例項解析:首先,找到 元素:

var c=document.getelementbyid("mycanvas");

然後,建立 context 物件:

var ctx=c.getcontext("2d");

getcontext("2d") 物件是內建的 html5 物件,擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。

下面的兩行**繪製乙個紅色的矩形:

ctx.fillstyle="#ff0000";

ctx.fillrect(0,0,150,75);

設定fillstyle屬性可以是css顏色,漸變,或圖案。fillstyle 預設設定是#000000(黑色)。

fillrect(x,y,width,height) 方法定義了矩形當前的填充方式。

在canvas上畫線,我們將使用以下兩種方法:

在canvas中繪製圓形, 我們將使用以下方法:

使用 canvas 繪製文字,重要的屬性和方法如下:

漸變可以填充在矩形, 圓形, 線條, 文字等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設定canvas漸變:

當我們使用漸變物件,必須使用兩種或兩種以上的停止顏色。

addcolorstop()方法指定顏色停止,引數使用座標來描述,可以是0至1.

使用漸變,設定fillstyle或strokestyle的值為 漸變,然後繪製形狀,如矩形,文字,或一條線。

把一幅影象放置到畫布上, 使用以下方法:

拖動 w3cschool.cc 到矩形框中:

**分析:

2.

拖動什麼 - ondragstart 和 setdata()

function drag(ev)

3.放到何處 - ondragover

event

.preventdefault() 4.

進行放置 - ondrop

function drop(ev)

學習html5的第六天課堂筆記

回顧總結 1.字型規則 1 color 2 cursor 3 font family 1.常規字型 2.常用字型 3.字型棧 4.webfont 5.字型圖示 第乙個框架 font awesome iconfont font face 4 font style normal italic obliq...

Html5筆記之小結

隨著and roid,ios 手機,平板等各種 的不斷擴增,加上對過去傳統 html flash 對手機和桌面的不相容等等。html5 來了,來解決這些問題了。html5 是w3c world wide web consortium,全球資訊網聯盟 與whatwg html5 建立的一些規則 看了兩...

第六天筆記

01 遍歷 items for item in my dict.items print item print key s,value s item 0 item 1 注意 如果迴圈遍歷字典的時候 你想需要字典的key和value 格式 for key位置,value位置 in my dict.ite...