canvas學習筆記 2d畫布基礎

< canvas > 元素創造了乙個固定大小的畫布，其上的渲染上下文canvasrendercontext2d，可以用來繪製和處理要展示的內容。

若要在canvas上繪圖，首先得獲取canvasrendercontext2d2d渲染上下文。（此處指2d的，不談webgl）

const canvas = document.getelementbyid('mycanvas');

const ctx = canvas.getcontext('2d');
ctx.fillstyle = 'pink';
ctx.fillrect(10, 10, 300, 300);

通過設定上下文的屬性，可以指定繪圖的樣式。

屬性簡介

canvas

canvas元素

fillstyle

用來填充路徑的當前的顏色、模式或漸變

font

字型樣式

globalalpha

指定在畫布上繪製的內容的不透明度

globalcompositeoperation

指定顏色如何與畫布上已有的顏色組合（合成）

linecap

指定線條的末端如何繪製

linedashoffset

設定虛線偏移量

linejoin

指定兩條線條如何連線

linewidth

指定畫筆（繪製線條）操作的線條寬度

miterlimit

當 linejoin 屬性為 "miter" 的時候，這個屬性指定了斜連線長度和線條寬度的最大比率

shadowblur

模糊效果程度

shadowcolor

陰影顏色

shadowoffsetx

陰影水平偏移距離

shadowoffsety

陰影垂直偏移距離

strokestyle

用於畫筆（繪製）路徑的顏色、模式和漸變

textalign

文字的對齊方式

textbaseline

文字垂直方向的對齊方式

canvas 

...ctx.fillstyle = "red";
ctx.fillrect(10, 10, 100, 100);

為什麼樣式設定了同樣大小，顯示卻截然不同的情況呢？

canvas中2D畫線詳解

一 w3c裡面的 和實現效果 手冊的 是這樣的 var c document.getelementbyid mycanvas var cxt c.getcontext 2d cxt.moveto 10,10 cxt.lineto 150,50 cxt.lineto 10,50 cxt.stroke ...

前端 學習筆記 一 canvas畫布

mycanvas width 200 height 100 style border 1px solid 000000 canvas 根據名字確定畫布 var c document.getelementbyid mycanvas 建立 context 物件,getcontext 2d 物件是內建的 ...

canvas之2D上下文

1.填充和描邊 1 fillstyle 2 strokestyle 2.繪製矩形 1 fillrect 2 strokerect 3 clearrect 清除畫布上的矩形區域 3.繪製路徑 1 arc x,y,radius,startangle,endangle,countercockwise 以 ...