canvas基礎教程（含示例）_第1頁
canvas基礎教程（含示例）_第2頁
canvas基礎教程（含示例）_第3頁
canvas基礎教程（含示例）_第4頁
canvas基礎教程（含示例）_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

canvas基礎教程一、canvas通過JS完成畫圖而不是csscanvas默認inline-block，可以認為是一種特殊的圖片。1、canvas劃線<canvasid="can"width="800"height="800"></canvas>（寬高不能放在style里面，否則比例不對）canvas里面的width和height相當于圖片的原始尺寸，加了外部style的寬高，就相當于對圖片進行壓縮和拉伸。//1、獲取原生dom對象letdom=document.getElementById('can');//2、獲取繪圖對象letcan=dom.getContext('2d');//3d是webgl//定義線條起點can.moveTo(0,0);//定義線條中點（非終點）can.lineTo(400,400);can.lineTo(800,0);//對標記范圍進行描邊can.stroke()//對標記范圍進行填充can.fill();2、設置線條屬性線條默認寬度是1.（一定要在繪圖之前設置。）can.lineWidth=2;//設置線條寬度can.strokeStyle='#f00';//設置線條顏色can.fillStyle='#f00';//設置填充區(qū)域顏色3、折線樣式miter：尖角（當尖角長度值過長時會自動變成折角，如果強制顯示尖角：can.miterLimit=100設置尖角長度閾值）round：圓角bevel：折角can.lineJoin='miter';can.moveTo(100,100);can.lineTo(300,100);can.lineTo(100,200);can.stroke()can.lineJoin='round';can.moveTo(400,100);can.lineTo(600,100);can.lineTo(400,200);can.stroke()can.lineJoin='bevel';can.moveTo(700,100);can.lineTo(900,100);can.lineTo(700,200);can.stroke()4、設置線帽round：加圓角線帽square：加直角線帽butt：不加線帽 can.lineCap='round'; can.moveTo(100,100); can.lineTo(300,100); can.stroke()//新建繪圖，使得上一次的繪畫樣式不會影響下面的繪畫樣式（代碼加在上一次繪畫和下一次繪畫中間。） can.beginPath() can.lineCap='square'; can.moveTo(100,200); can.lineTo(300,200); can.stroke() can.beginPath() can.lineCap='butt'; can.moveTo(100,300); can.lineTo(300,300);5、畫矩形//參數(shù)：x,y,寬，高can.rect(100,100,100,100);can.stroke();//畫完即填充can.fillRect(100,100,100,100);6、畫圓弧//參數(shù)：圓心x，圓心y，半徑，圓弧起點與圓心的夾角度數(shù)，圓弧終點與圓心的夾角度數(shù)，true（逆時針繪畫）can.arc(500,300,200,0,2*Math.PI/360*90,false);can.stroke()示例：can.moveTo(500,300);can.lineTo(500+Math.sqrt(100),300+Math.sqrt(100))can.arc(500,300,100,2*Math.PI/360*startDeg,2*Math.PI/360*endDeg,false);can.closePath()//將圖形起點和終點用線連接起來使之成為封閉的圖形can.fill()1、can.beginPath()

//新建繪圖，使得上一次的繪畫樣式不會影響下面的繪畫樣式（代碼加在上一次繪畫和下一次繪畫中間。）2、can.closePath()

//將圖形起點和終點用線連接起來使之成為封閉的圖形。7、旋轉(zhuǎn)畫布can.rotate(2*Math.PI/360*45);//一定要寫在開始繪圖之前can.fillRect(0,0,200,10);旋轉(zhuǎn)整個畫布的坐標系（參考坐標為畫布的(0,0)位置）8、縮放畫布can.scale(0.5,2);can.fillRect(0,0,200,10);整個畫布：x方向縮放為原來的0.5，y方向拉伸為原來的2倍。9、畫布位移can.translate(100,100)can.fillRect(0,0,200,10);10、保存與恢復畫布狀態(tài)can.save()//存檔：保存當前畫布坐標系狀態(tài)can.restore()//讀檔：恢復之前保存的畫布坐標系狀態(tài)11、示例1：指針時鐘<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>clock</title><styletype="text/css">#can{width:1000px;height:600px;background:linear-gradient(45deg,green,skyblue);}</style></head><body><canvasid="can"width="2000"height="1200"></canvas></body><scripttype="text/javascript">letdom=document.getElementById('can');letcan=dom.getContext('2d');//把畫布的圓心移動到畫布的中心can.translate(dom.width/2,dom.height/2);//保存當前的畫布坐標系can.save()run();functionrun(){setInterval(function(){clearCanvas();draw();},10);}//繪圖functiondraw(){lettime=newDate();lethour=time.getHours();letmin=time.getMinutes();letsec=time.getSeconds();letminSec=time.getMilliseconds();drawPannl();drawHour(hour,min,sec);drawMin(min,sec);drawSec(sec,minSec);drawPoint();}//最簡單的方法：由于canvas每當高度或?qū)挾缺恢卦O時，畫布內(nèi)容就會被清空functionclearCanvas(){dom.height=dom.height;can.translate(dom.width/2,dom.height/2);can.save()}//畫表盤functiondrawPannl(){can.beginPath();can.restore()can.save()can.lineWidth=10;can.strokeStyle='skyblue';can.arc(0,0,400,0,2*Math.PI);can.stroke();for(leti=0;i<12;i++){can.beginPath();can.lineWidth=16;can.strokeStyle='greenyellow';can.rotate(2*Math.PI/12)can.moveTo(0,-395);can.lineTo(0,-340);can.stroke();}for(leti=0;i<60;i++){can.beginPath();can.lineWidth=10;can.strokeStyle='#fff';can.rotate(2*Math.PI/60)can.moveTo(0,-395);can.lineTo(0,-370);can.stroke();}}//畫時針functiondrawHour(h,m,s){can.beginPath();can.restore()can.save()can.lineWidth=24;can.strokeStyle='palevioletred';can.lineCap='round'can.rotate(2*Math.PI/(12*60*60)*(h*60*60+m*60+s))can.moveTo(0,0);can.lineTo(0,-200);can.stroke();}//畫分針functiondrawMin(m,s){can.beginPath();can.restore()can.save()can.lineWidth=14;can.strokeStyle='#09f';can.lineCap='round'can.rotate(2*Math.PI/(60*60)*(m*60+s))can.moveTo(0,0);can.lineTo(0,-260);can.stroke();}//畫秒針functiondrawSec(s,ms){can.beginPath();can.restore()can.save()can.lineWidth=8;can.strokeStyle='#f00';can.lineCap='round'can.rotate(2*Math.PI/(60*1000)*(s*1000+ms));can.moveTo(0,50);can.lineTo(0,-320);can.stroke();}//畫中心點functiondrawPoint(){can.beginPath();can.restore()can.save()can.lineWidth=10;can.fillStyle='red';can.arc(0,0,12,0,2*Math.PI);can.fill();}</script></html>12、示例2：圓弧時鐘<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>clock</title><styletype="text/css">#can{width:1000px;height:600px;background:linear-gradient(45deg,rgb(94,53,6),black);}</style></head><body><canvasid="can"width="2000"height="1200"></canvas></body><scripttype="text/javascript">letdom=document.getElementById('can');letcan=dom.getContext('2d');//把畫布的圓心移動到畫布的中心can.translate(dom.width/2,dom.height/2);//保存當前的畫布坐標系can.save();//圓形指針起始角度letstartDeg=2*Math.PI/360*270;run();//draw();functionrun(){setInterval(function(){clearCanvas();draw();},20);}//繪圖functiondraw(){lettime=newDate();//lethour=time.getHours();lethour=time.getHours()>10?time.getHours()-12:time.getHours();letmin=time.getMinutes();letsec=time.getSeconds();letminSec=time.getMilliseconds();drawPannl();drawTime(hour,min,sec,minSec);drawHour(hour,min,sec);drawMin(min,sec);drawSec(sec,minSec);drawPoint();}//最簡單的方法：由于canvas每當高度或?qū)挾缺恢卦O時，畫布內(nèi)容就會被清空functionclearCanvas(){dom.height=dom.height;can.translate(dom.width/2,dom.height/2);can.save()}//畫表盤functiondrawPannl(){can.restore()can.save()//設置時表盤can.beginPath();can.lineWidth=50;can.strokeStyle='rgba(255,23,87,0.2)';can.arc(0,0,400,0,2*Math.PI);can.stroke();//設置分表盤can.beginPath();can.strokeStyle='rgba(169,242,15,0.2)';can.arc(0,0,345,0,2*Math.PI);can.stroke();//設置秒表盤can.beginPath();can.strokeStyle='rgba(21,202,230,0.2)';can.arc(0,0,290,0,2*Math.PI);can.stroke();//小時刻度//for(leti=0;i<12;i++){//can.beginPath();//can.lineWidth=16;//can.strokeStyle='rgba(0,0,0,0.2)';//can.rotate(2*Math.PI/12)//can.moveTo(0,-375);//can.lineTo(0,-425);//can.stroke();//}//分針刻度//for(leti=0;i<60;i++){//can.beginPath();//can.lineWidth=10;//can.strokeStyle='#fff';//can.rotate(2*Math.PI/60)//can.moveTo(0,-395);//can.lineTo(0,-370);//can.stroke();//}}//畫時針functiondrawHour(h,m,s){letrotateDeg=2*Math.PI/(12*60*60)*(h*60*60+m*60+s);can.beginPath();can.restore()can.save()//時針圓弧can.lineWidth=50;can.strokeStyle='rgb(255,23,87)';can.lineCap='round';can.shadowColor="rgb(255,23,87)";//設置陰影顏色can.shadowBlur=20;//設置陰影范圍can.arc(0,0,400,startDeg,startDeg+rotateDeg);can.stroke();//時針指針can.beginPath();can.lineWidth=24;can.strokeStyle='rgb(255,23,87)';can.lineCap='round'can.rotate(rotateDeg)can.moveTo(0,0);can.lineTo(0,-100);can.stroke();}//畫分針functiondrawMin(m,s){letrotateDeg=2*Math.PI/(60*60)*(m*60+s);can.beginPath();can.restore()can.save()//分針圓弧can.lineWidth=50;can.strokeStyle='rgb(169,242,15)';can.lineCap='round'can.shadowColor="rgb(169,242,15)";can.shadowBlur=20;can.arc(0,0,345,startDeg,startDeg+rotateDeg);can.stroke();//分針指針can.beginPath();can.lineWidth=14;can.strokeStyle='rgb(169,242,15)';can.lineCap='round'can.rotate(rotateDeg)can.moveTo(0,0);can.lineTo(0,-160);can.stroke();}//畫秒針functiondrawSec(s,ms){letrotateDeg=2*Math.P

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論