canvas知識總結
更新時間:2017年01月25日 11:23:23 作者:13611606223
本文主要介紹了canvas的相關知識。具有很好的參考價值,下面跟著小編一起來看下吧
1.基礎知識
canvas元素繪制圖像的時候有兩種方法,分別是
context.fill()//填充 context.stroke()//繪制邊框
style:在進行圖形繪制前,要設置好繪圖的樣式
context.fillStyle//填充的樣式 context.strokeStyle//邊框樣式 context.lineWidth//圖形邊框寬度
context.arc(centerx圓心橫左邊,centery圓心縱坐標,radius半徑,startingAngle起始弧度值,endingAngle結束弧度值,anticlockwise='false'順時針默認false)
2.繪制非填充線段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" > <link rel="stylesheet" href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="http://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> .canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=300; canvas.height=300; ctx.beginPath(); //一個繪畫開始 ctx.moveTo(50,50);//線段起點 ctx.lineTo(100,100);//終點1 ctx.lineTo(50,100);//終點2 ctx.lineTo(50,50);//終點3 ctx.lineWidth=5;//邊框寬度 ctx.strokeStyle="red"; //邊框樣式 ctx.closePath(); //一個繪畫結束 ctx.stroke();//繪制線段 }else{ alert('當前瀏覽器不支持,請更換瀏覽器'); } } draw(); } </script> <style tyrp="text/css"> canvas{ border: 1px solid black;margin: 0 auto;display: block;} </style> </head> <body> <canvas id="canvas">當前瀏覽器不支持,請更換瀏覽器</canvas> </body> </html>
3.繪制填充圖形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" > <link rel="stylesheet" href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="http://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> .canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=300; canvas.height=300; ctx.beginPath(); //一個繪畫開始 ctx.moveTo(50,50);//線段起點 ctx.lineTo(100,100);//終點1 ctx.lineTo(50,100);//終點2 ctx.lineTo(50,50);//終點3 ctx.fillStyle='red'; ctx.fill(); //邊框添加 ctx.lineWidth=5;//邊框寬度 ctx.strokeStyle="blue"; //邊框樣式 ctx.closePath(); //一個繪畫結束 ctx.stroke();//繪制線段 }else{ alert('當前瀏覽器不支持,請更換瀏覽器'); } } draw(); } </script> <style tyrp="text/css"> canvas{ border: 1px solid black;margin: 0 auto;display: block;} </style> </head> <body> <canvas id="canvas">當前瀏覽器不支持,請更換瀏覽器</canvas> </body> </html>
4.繪制圓弧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" > <link rel="stylesheet" href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="http://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=800; canvas.height=800; ctx.beginPath(); //開始一個新的繪畫 ctx.lineWidth=5;//邊框寬度 ctx.strokeStyle="red"; //邊框樣式 ctx.arc(100, 100, 30, 0, 1.5*Math.PI); ctx.closePath(); //一個繪畫結束,如果繪畫不是封閉的,就封閉起來 ctx.stroke();//繪制線段 ctx.beginPath(); //開始一個新的繪畫 ctx.lineWidth=5;//邊框寬度 ctx.strokeStyle="red"; //邊框樣式 ctx.arc(200, 100, 30, 0, 2*Math.PI); ctx.closePath(); //一個繪畫結束,如果繪畫不是封閉的,就封閉起來 ctx.stroke();//繪制線段 ctx.beginPath(); //開始一個新的繪畫 ctx.lineWidth=5;//邊框寬度 ctx.strokeStyle="red"; //邊框樣式 ctx.arc(300, 100, 30, 0, 0.5*Math.PI); ctx.closePath(); //一個繪畫結束,如果繪畫不是封閉的,就封閉起來 ctx.stroke();//繪制線段 ctx.beginPath(); //開始一個新的繪畫 ctx.lineWidth=5;//邊框寬度 ctx.strokeStyle="red"; //一個繪畫結束,如果繪畫不是封閉的,就封閉起來 ctx.arc(400, 100, 30, 0, 0.5*Math.PI,true);//注意:0*PI,0.5*PI,1*PI,1。5*PI,2*PI所占據的位置是固定的 ctx.closePath(); //一個繪畫結束 ctx.stroke();//繪制線段 ctx.beginPath(); //開始一個新的繪畫 ctx.fillStyle="red"; //邊框樣式 ctx.arc(500, 100, 30, 0, 1.5*Math.PI); ctx.closePath(); //一個繪畫結束,如果繪畫不是封閉的,就封閉起來 ctx.fill();//繪制填充 ctx.beginPath(); //開始一個新的繪畫 ctx.lineWidth=5;//邊框寬度 ctx.strokeStyle="red"; //邊框樣式 ctx.arc(600, 100, 30, 0, 1.5*Math.PI); ctx.stroke();//繪制線段 }else{ alert('當前瀏覽器不支持,請更換瀏覽器'); } } draw(); } </script> </head> <body> <canvas id="canvas">當前瀏覽器不支持,請更換瀏覽器</canvas> </body> </html>
5.繪制矩形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" > <link rel="stylesheet" href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="http://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=500; canvas.height=500; ctx.fillRect(25,25,100,100);//繪制一個填充的矩形 ctx.clearRect(45,45,60,60);//清除指定矩形區(qū)域,讓清除部分完全透明 ctx.strokeRect(50,50,50,50); //繪制一個矩形的邊框 }else{ alert('當前瀏覽器不支持,請更換瀏覽器'); } } draw(); } </script> </head> <body> <canvas id="canvas">當前瀏覽器不支持,請更換瀏覽器</canvas> </body> </html>
6.繪制文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" > <link rel="stylesheet" href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="http://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=500; canvas.height=500; ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); }else{ alert('當前瀏覽器不支持,請更換瀏覽器'); } } draw(); } </script> </head> <body> <canvas id="canvas">當前瀏覽器不支持,請更換瀏覽器</canvas> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" > <link rel="stylesheet" href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="http://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=500; canvas.height=500; ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50); }else{ alert('當前瀏覽器不支持,請更換瀏覽器'); } } draw(); } </script> </head> <body> <canvas id="canvas">當前瀏覽器不支持,請更換瀏覽器</canvas> </body> </html>
7.圖片操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" > <link rel="stylesheet" href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="http://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=500; canvas.height=500; var img=new Image(); img.src='http://gzdl.cooco.net.cn/files/down/test/imggzdl/312/15812.jpg' img.onload=function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } }else{ alert('當前瀏覽器不支持,請更換瀏覽器'); } } draw(); } </script> </head> <body> <canvas id="canvas">當前瀏覽器不支持,請更換瀏覽器</canvas> </body> </html>
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關文章
12個非常有創(chuàng)意的JavaScript小游戲
JavaScript 在Web開發(fā)過程中已經是必不可少的重要分子,他推動著Web的交互性往越來越高的層次發(fā)展,現在的很多Web游戲也基于這類語言開發(fā)。2010-03-03