標籤：wim var png 載入 line pre star bsp new
今天學習了下HTML5的基本知識，用畫筆在畫布上畫了幾個東西，效果，相關代碼如下，注意點總結在末尾；
<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><canvas id="can1" width="500px" height="500px" style="border:1px solid red"></canvas><script type="text/javascript"> //準備工作 //得到畫布 var canvas1=document.getElementById("can1"); //得到上下文引用對象，你可以理解成畫筆 var cxt=canvas1.getContext("2d"); //畫出一個直線 cxt.moveTo(30,10);//設定點的位置 cxt.lineTo(30,90);//設定第二個點的位置 cxt.stroke();//將這兩個點連起來，畫出直線 /** *畫出一個填充的三角形 */ cxt.beginPath();//開始新的起點 cxt.moveTo(50,10);//設定點的位置 cxt.lineTo(50,90);//設定第二個點的位置 cxt.lineTo(80,90);//設定第三個點的位置 cxt.closePath();//結束一個畫的動作，閉合這三個點 //cxt.fill();//實體填充 cxt.stroke();//空心填充 //stroke劃線，fill就是填充 //畫出一個矩形,四個點的含義，前兩個是左上方的點，後面兩個分別是寬和高 //strokeRect(x,y,width,height) cxt.strokeRect(100,10,30,80); //畫出一個填充的矩形，其顏色是藍色 cxt.fillStyle="#00ffff"; cxt.fillRect(150,10,30,80); //畫出一個圓形arc //六個參數arc(x,y,redius,startAngle,endAngle,counterclockwise) cxt.beginPath();//開始新的起點 //true代表逆時針，false代表順時針，其實這個無所謂的 cxt.arc(220,30,20,0,360,false); cxt.closePath();//結束一個畫的動作 cxt.stroke(); //畫出一個填充的圓形arc //六個參數arc(x,y,redius,startAngle,endAngle,counterclockwise) cxt.fillStyle="#ff0000";//紅色 cxt.beginPath();//開始新的起點 //true代表逆時針，false代表順時針，其實這個無所謂的 cxt.arc(280,30,20,0,360,false); cxt.closePath();//結束一個畫的動作 cxt.fill(); //畫一個圖片出來，步驟如下 //1、建立image對象 var img1=new Image(); //2、指定是哪個圖片 img1.src="1.png"; //3、載入完畢後，再繪製圖片 img1.onload=function(){ cxt.drawImage(img1,30,100,100,90); } </script></body></html>
先定義了一個畫布，在script中擷取畫筆，用畫筆畫你想畫的東西
注意點：
1、除了線和矩形不需要beginPath（），和closePath（）其他都需要，不然會出一些莫名奇妙的問題
2、stroke劃線，fill就是填充
3、顏色的設定要在beginPath（）之前，否則不起作用；
4、.畫圓形的時候逆時針和順時針有時候不太好用，計算設定了0度到360.順時針和逆時針卻不一樣，可以正難則反試試；
5、canvas是畫布，getcontext（）是畫筆；
HTML5初學筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
