本文沒有太多理論知識,大部分都是通過案例來講解,因為我對canvas並未達到熟練的程度,只能做些基礎講解.
id="cvs"
width="1000"
height="500"
style="border: 1px solid black;">
canvas>
//獲取標籤
var cvs = document.getelementbyid('cvs');
//獲取上下文,引數為2d/webgl,這裡表示繪製2d圖形,一般使用2d,使用3d圖形傳webgl
var ctx = cvs.getcontext('2d');
//moveto(x,y)顯示指定路徑起點,引數為x,y軸座標
//lineto(x,y)描述一條從當前位置到指定x和y座標位置的線
ctx.moveto(0,0);
ctx.lineto(200,200);
ctx.lineto(100,100);
ctx.lineto(100,100);
ctx.fillstyle = "red";//設定填充樣式
ctx.fill();//填充樣式
script>
body>
width="1000"
height="500"
id="cvs">
canvas>
var cvs =document.getelementbyid('cvs');
var ctx = cvs.getcontext('2d');
function
rect
(ctx,x,y,w,h)
ctx.strokestyle = 'red';
rect(ctx, 10, 100, 150, 50);
script>
body>
id="cvs"
width="1000"
height="500"
style="border: 1px solid black;">
canvas>
var cvs =document.getelementbyid('cvs');
var ctx = cvs.getcontext('2d');
//先渲染樣式再填充
ctx.strokestyle = 'yellow';//設定描邊樣式
ctx.linewidth = 15;//設定線寬,不要帶單位!
ctx.strokerect(50,50,100,100);
ctx.fillstyle = 'red';//設定填充樣式
ctx.fillrect(50,200,100,100);
清除矩形
清除注釋掉的那段清除矩形的**之後,如圖
開始路徑
ctx.arc(200,200,50,degtoarc(0),degtoarc(360),true);//設定true是讓它反時針畫圓,預設是順時針
寫不下去了啊,好痛苦啊,好想去逛超市啊…
var cvs = document.getelementbyid('cvs');
var ctx = cvs.getcontext('2d');
//arc(x,y,半徑,起始角度,結束角度)起始角會順著順時針的角度一直到結束角
ctx.arc(200,100,50,0,2*math.pi);
//原理是周長 = 2*pi*r
ctx.strokestyle = 'red';
ctx.stroke();
貼上一張導圖,做個總結,軟體是xmind
入門級演算法
今天我想記錄的是一些關於入門級別的演算法。將乙個字串s對映為乙個整數，使得該整數可以唯一的代表字串s。先假設字串均由大寫字母a z構成，不妨設a z為0 25，即將26個大寫字母對應到了二十六進製制中。按照將二十六進製制轉換為十進位制的思路，即可實現將字串對映為整數的需求。題目 給出n個字串 恰好由...
PKI入門級介紹
隨著電子商務的迅速發展，資訊保安已成為焦點問題之一，尤其是網上支付和網路銀行對資訊保安的要求顯得更為突出。為了能在網際網路上開展安全的電子商務活動，公開金鑰基礎設施 pki,public key infrastructure 逐步在國內外得到廣泛應用。我們是否真的需要 pki pki 究竟有什麼用？...
PKI入門級介紹
隨著電子商務的迅速發展，資訊保安已成為焦點問題之一，尤其是網上支付和網路銀行對資訊保安的要求顯得更為突出。為了能在網際網路上開展安全的電子商務活動，公開金鑰基礎設施 pki,public key infrastructure 逐步在國內外得到廣泛應用。我們是否真的需要 pki pki 究竟有什麼用？...