Canvas筆記

我知道的兩個Canvas庫 jsCsript庫,說來也悲哀,項目中沒有怎麼用到,忘的差很少了,讓筆記喚醒個人知識!自勉!
var canvas=document.getElementsByTagName('canvas')[0];

var cntx=canvas.getContext('2d');

cntx.fillRect(100,100,100,100);//在畫布裏以100,100爲原點,以寬高100畫正方形,填充默認黑色

繪製方塊:

①fillRect(L,T,W,H);默認顏色是黑色 方塊的起點 (L, T) 方塊的寬高(W,H)

②strokeRect(L,T,W,H) 帶邊框的方塊,默認1像素 黑色邊框 ,顯示不出來緣由

設置繪圖:能夠修改默認的
①fillStyle:填充顏色 (繪製canvas是有順序的) 先寫誰 覆蓋誰

var canvas=document.getElementsByTagName('canvas')[0];
var cntx=canvas.getContext('2d');
cntx.fillStyle='red';
cntx.fillRect(100,100,100,100);

②lineWidth:線寬度,是一個數值
cntx.lineWidth=20;

③strokeStyle:邊線顏色
var canvas=document.getElementsByTagName('canvas')[0];
var cntx=canvas.getContext('2d');
cntx.strokeStyle='purple';
cntx.lineWidth=20;
cntx.strokeRect(100,100,100,100);
邊界繪製:
①lineJon:邊界鏈接點樣式
-miter(默認) round(圓) bevel(斜角)
②lineCap:端點樣式
-butt(默認) round(圓角) square(高度多出爲寬一半的值)

var canvas=document.getElementsByTagName('canvas')[0];
var cntx=canvas.getContext('2d');
cntx.lineCap='round';
cntx.moveTo(200,200);
cntx.lineTo(400,400);
cntx.lineWidth=20;
cntx.stroke();

繪製路徑:

①beginPath:開啓繪製路徑

②closePath:結束繪製路徑

③moveTo:移動到繪製的新目標點

④lineTo:新的目標點

cntx.beginPath();
cntx.moveTo(100,100);
cntx.lineTo(200,100);
cntx.stroke();描邊 默認是黑色

 

........畫三角形.........

cntx.beginPath();
cntx.moveTo(100,100);
cntx.lineTo(200,100);
cntx.lineTo(200,200);
cntx.closePath();
cntx.stroke();

繪製路徑 2
①stroke :畫線,默認是黑色
②fill:填充:默認是黑色
③rect:矩形區域
④clearRect:刪除一個畫布的矩形區域
⑤save:保存路徑
⑥restore:恢復路徑

例1:鼠標畫線
例2:方塊移動

針對不一樣的做畫 要有不一樣的開啓和閉合

var canvas=document.getElementsByTagName('canvas')[0];
var cntx=canvas.getContext('2d');
cntx.beginPath();
cntx.rect(200.5,200.5,100,100);
cntx.stroke();
cntx.closePath();
cntx.clearRect(0,0,canvas.width,canvas.height);

繪製以前要把以前的繪製清除掉 再繪製出來的就連貫起來

 

cntx.save();//保存開始
cntx.beginPath();

cntx.fillStyle='red';//若是沒有cntx.save();cntx.restore();這兩句,上下兩個三角形都是填充紅色了
//有了這兩句就只有上一個三角形填充紅色 後面一個三角形不受影響
cntx.moveTo(100,100);
cntx.lineTo(200,100);
cntx.lineTo(200,200);
cntx.closePath();
cntx.fill();
cntx.restore();//恢復

cntx.beginPath();
cntx.moveTo(200,100);
cntx.lineTo(300,100);
cntx.lineTo(400,200);
cntx.closePath();
cntx.fill();

繪製圓:
arc(x,y,半徑,起始弧度,結束弧度,旋轉方向);
-x,y:起始的位置
-弧度與角度的關係:弧度=角度*Math.PI/180 數學裏π=PI
-旋轉方向:順時針默認:false 逆時針(true)
-例子:用arc畫個鐘錶

 

//繪製其餘曲線:
arcTo(x1,y1,x2,y2,r)
-第一組座標 第二組座標 半徑
quadraticCurveTo(dx,dy,x1,y1)
-貝塞爾曲線:第一組控制點 第二組結束座標
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
- 貝塞爾曲線:第一組控制點 第二組控制點 第三組結束座標

變換:
①translate
-偏移:從起始點爲基點,移動當前座標位置
②rotate
-旋轉:參數爲弧度
-例子:旋轉的小方塊
③scale
-縮放例子:旋轉加縮放的小方塊

 

插入圖片:
①等待圖片加載完,再執行canvas操做
-圖片預加載,在onload中調用方法
②drawlmage(olmg,x,y,w,h)
-oImg:當前圖片x,y:座標 w,h寬高
-例子:微博的圖片旋轉效果
③drawlmage(olmg,x1,y1,W,H,x,y,w,h)
-x1,y1 裁剪起始點
-W,H裁剪寬高

設置背景:
-createPattern(oImg,平鋪方式)
-2參位:repeat repeat-x repeat-y no-repeat

 

漸變:
createLinearGradient(x1,y1,x2,y2);
-線性漸變:
-第一組參數:起始點座標 第二組參數:結束點座標
-addColorStop(位置,顏色) 添加漸變點
var canvas=document.getElementById("canvas"); 獲取canvas

var cntx=canvas.getContext('2d'); 從canvas身上設置2d內容範圍；

var mygradient=cntx.createLinearGradient(30,30,300,300); 在2dcanvas內容範圍內設置線性漸變的範圍;

mygradient.addColorStop("0","red" );
mygradient.addColorStop("0.2","yellow" ); (0-1)的值肯定顏色漸變排列順序
......
......
cntx.fillStyle=mygradient; canvas身上設置2d內容範圍填充線性漸變樣式

cntx.fillRect(0,0,400,400); canvas身上設置2d內容範圍填充線性漸變樣式的範圍

createRadialGradient(x1,y1,r1,x2,y2,r2);
-放射性漸變:
參數:第一個圓的座標和半徑 第二個圓的座標和半徑

文本:
①strokeText(文字,x,y)
-文字邊框
②fillText(文字,x,y)
-文字填充
③font
-文字大小和樣式:'60px impactt'
④textAlign:文字的做業居中方式
-默認是start 根left同樣的效果,end right center
⑤textBaseline:文字的上下居中方式
-文字上下的位置的方式:默認:alphabetic top middle bottom
文本2:
①measureText( )
-measureText(str).width;只有寬度 沒有高度
-例子:文字居中

陰影:
①shadowOffsetX shadowOffsetY
-X軸偏移 Y軸偏移
②shadowBlur
-高斯模糊度
③shadowColor
-陰影顏色

alert(canvas.shadowColor);//默認顏色:黑色透明

四部分
canvas
像素
①getImgeData(x,y,w,h)
-獲取圖像數據
②putImgeData(獲取圖像,x,y)
-設置新的圖像數據
③屬性
-width:一行的像素個數
-height:一行的像素個數
-data:一個數組,包含每一個像素的grba的四個值,注意:每一個值都在0~255之間的整數

像素2:
①createImageData(w,h)
-生成新的像素矩陣,初始值就是全透明的黑色,即(0,0,0)
-像素顯字
②獲取和設置指定座標
-封裝:getXY setXY
③圖片的像素操做
-必須是同源下
-例子:反色 倒影 漸變等
-例子:馬賽克效果

canvas 第5部分

合成:①全局阿爾法值 -globalAlpha②覆蓋合成 -源:新的圖形 -目標:已經繪製過的圖形 -globalCompositeOperation屬性 》source-over destination-over source-atop 》source-atop source-in destination-in 》source-out destination-out linghter 》copy xor