1 canvas—畫布,
2獲取canvas中滑鼠的位置座標。
e.clientx;
e.clienty;
3document.getelementbyid(id);//返回對擁有指定 id 的第乙個物件的引用。
4innerhtml在js是雙向功能:獲取物件的內容 或 向物件插入內容;
如:這是內容
,我們可以通過 document.getelementbyid(『aa』).innerhtml 來獲取id為aa的物件的內嵌內容;
也可以對某物件插入內容,如 document.getelementbyid(『abc』).innerhtml=『這是被插入的內容』;
1此時,如果我們想要繪製的這三條折線是不同顏色的,那該怎麼辦?一種常見的錯誤用法就是:context.moveto(100,200);
context.lineto(300,400);
context.lineto(100,600);
context.linewidth = 8;
context.strokestyle = "red";
context.stroke();//繪製
context.moveto(300,200);
context.lineto(500,400);
context.lineto(300,600);
context.linewidth = 8;
context.strokestyle = "green";
context.stroke();//繪製
context.moveto(500,200);
context.lineto(700,400);
context.lineto(500,600);
context.linewidth = 8;
context.strokestyle = "blue";
context.stroke();//繪製
執行結果會是三條折線都是藍色的。因為這裡的第二條折線的strokestyle屬性會覆蓋第一條折線的strokestyle屬性,而stroke()方法的執行會繪製當前所有的狀態,所以第一條折線就變成綠色。同理,最終三條折線就都是藍色。因此呢,這裡就需要使用beginpath()方法來重新進行一次全新的繪製。正確方法見上例。
2接下來我們介紹一下填充屬性fillstyle和填充繪製方法fill():
context.beginpath();
context.moveto(100,100);
context.lineto(500,100);
context.lineto(500,500);
context.lineto(100,500);
context.closepath();
context.linewidth = 8;
context.strokestyle = "#333";
context.stroke();
context.fillstyle = "red"; //填充顏色
context.fill(); //填充
可以看到圖形的邊框寬度比沒有填充顏色的圖形的邊框寬度小,這是因為我們先繪製邊框,再填充顏色。而實際上應該是先填充顏色,再繪製邊框。而且fill()方法和stroke()方法的原理是一樣的,都是基於當前狀態進行繪製。所以,為了可讀性,我們可以將屬性設定放在一起,最後在使用fill()和stroke()方法:
context.beginpath();
context.moveto(100,100);
context.lineto(500,100);
context.lineto(500,500);
context.lineto(100,500);
context.closepath();
context.linewidth = 8;
context.strokestyle = "#333";
context.fillstyle = "red";
context.fill(); //先填充
context.stroke(); //再繪製邊框
4最後還有兩個線條的屬性:linejoin 和 miterlimit
linejoin顧名思義就是線條與線條之間的連線方式,該屬性有三個屬性值:miter(預設值,尖角),bevel(銜接),round(圓角)。還有乙個miterlimit屬性,這個屬性只有當linejoin屬性值是miter時才有用,預設值是10 。
前三個值(紅綠藍)的範圍為0到255之間的整數或者0%到100%之間的百分數。這些值描述了紅綠藍三原色在預期色彩中的量。
第四個值,alpha值,制訂了色彩的透明度/不透明度,它的範圍為0.0到1.0之間,0.5為半透明。
rgba(255,255,255,0)則表示完全透明的白色;
rgba(0,0,0,1)則表示完全不透明的黑色;
rgba(0,0,0,0)則表示完全不透明的白色,也即是無色;
Canvas座標系轉換
canvas中的座標是從左上角開始的,x軸沿著水平方向 按畫素 向右延伸,y軸沿垂直方向向下延伸。左上角座標為x 0,y 0的點稱作原點。在預設座標系中,每乙個點的座標都是直接對映到乙個css畫素上。但是如果影象的每次繪製都參考乙個固定點將缺少靈活性,於是在canvas中引入 當前座標系 的概念,所...
Canvas學習 Canvas裡的座標系統
上一節我們做好了使用canvas的準備工作,但並沒有深入的介紹如何使用canvas,比如怎麼繪製圖形,怎麼做canvas動畫等。但並不用著急,隨著我們後面的深入學習,這一切都會知道的。在深入學習之前,我們有必要先了解canvas裡的座標系統。那麼這一節,就先來了解canvas的座標系統。在數學裡,我...
09 canvas繪製座標系
1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 09 canvas繪製座標系 title 6 style 7 11canvas 16style 17head 18 body 19 canvas width 500 h...