canvas基礎知識點(一)

2021-09-14 03:29:04 字數 1077 閱讀 3976

給canvas設定寬高:

canvas標籤的寬高預設是300*150,是乙個行內塊元素

可以在canvas標籤上通過width,height來設定

可以在js中給dom物件設定:

mycanvas.width = 500

mycanvas.height = 500

注意:不要通過css來調整canvas的寬高,導致內部的canvas畫布被拉伸,圖形變形

獲取畫筆工具:

canvas繪圖都是通過canvas標籤的畫筆來進行的var ctx = canvas.getcontext('2d')

注意,不要寫成getcontent,裡面傳入的引數目前也只有2d這一種情況

3、 描邊和填充

canvas繪製圖形都是繪製的路徑,看不見摸不著的一種東西,需要進行描邊或填充之後才能看到真正的圖形

如果繪製圖形的路徑在繪製完成後沒有閉合,繼續繪製路徑的時候會首尾相連

在填充的時候如果路徑依然沒有閉合,會將路徑的閉合區域填充

ctx.fill()//填充

ctx.stroke()//描邊

可以調整ctx.strokestyle,ctx.fillstyle屬性來更改填充,描邊的顏色,值為顏色值(rgb,rgba,word,16進製制)

繪製矩形

ctx.rect(x,y,w,h)

canvas的座標系起點是左上角,x軸向右正方向,y軸向下正方向

x,y代表的是矩形起點(左上角)的位置,w,h就是寬高

可以使用strokerect,fillrect方法直接繪製乙個填充、描邊的矩形

清楚矩形區域以及動畫原理

ctx.clearrect(x,y,w,h)可以清除某乙個矩形區域的圖形

canvas實現動畫的原理就是不斷的繪製和擦除來實現

var ctx = canvas.getcontext("2d")

let x=0,y=0;

ctx.fillrect(x,y,50,50)

setinterval(function () ,30)

基礎知識點

1 inline block布局 2 table布局 3 justify的末行不對齊 4 兩個圖示之間有空格 換行 5 背景中的的 路徑的 全部斜槓都為 不是 命令列下的這種 doctype html html head meta charset utf 8 title xx title head ...

HTML基礎知識點一

ie trident 核心 firefox gecko 核心 safari webkit 核心 opera 以前是presto 核心,opera 現已改用google chrome 的blink 核心 chrome blink 基於webkit,google 與opera software 共同開發...

js基礎知識點(一)

js原始型別有哪幾種 null是物件嗎?boolean number null undefined string symbol 另外對於null來說,很多人會認為他是個物件型別,其實這是錯誤的。雖然typeof null會輸出object,但是這只是 js 存在的乙個悠久 bug。在 js 的最初版...