Canvas學習筆記 一 基礎知識

2021-09-01 04:07:03 字數 717 閱讀 7393

1、

元素id:不是元素專享,和標準的html標籤一樣,都可以為元素指定id;

width:元素寬度,預設為300px。可以通過dom和css進行設定;

height:元素高度,預設為150px。

可以通過dom和css進行設定;

注:使用css設定width和height時,

渲染影象會縮放適應布局,這意味著影象發生了變形,這時需要顯示指定canvas的width和height屬性的值。

canvas預設是全透明的,但是可以像一樣指定樣式(邊距、邊框、背景等),指定的樣式不會對影象產生影響。

為了相容舊版本瀏覽器,canvas提供了替換內容,例如:

current stock price: $3.15 +0.15

2 、

渲染上下文

canvas初始化是空白的,要在上面畫圖首先需要渲染上下文,

//通過id獲取canvas元素物件

var canvas = document.getelementbyid('canvas_test');

//通過canvas獲取上下文

//注:2d是目前唯一的選擇

var context = canvas.getcontext('2d');

3 、

簡單的例子

執行後的效果:

Canvas基礎知識積累

id canvas canvas var canvas document.getelementbyid canvas var context canvas.getcontext context就是canvas物件,接下來都是對其進行操作 設定width和height canvas.width 102...

canvas基礎知識點(一)

給canvas設定寬高 canvas標籤的寬高預設是300 150,是乙個行內塊元素 可以在canvas標籤上通過width,height來設定 可以在js中給dom物件設定 mycanvas.width 500 mycanvas.height 500注意 不要通過css來調整canvas的寬高,導...

Python學習筆記一 基礎知識

lovely python整理 python 弱資料型別,不需要強制宣告 python 一切都是物件 pyhton 語句塊以 結尾,並且下句縮排 python 復用級別 行 函式 類 模組 python 支援函式 python kiss原則 keep it stupid 一 中文支援 二 使用模組 ...