展示canvas座標

2021-09-22 22:35:40 字數 2742 閱讀 4797

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...