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