HTML5 canvas畫圖
HTML5 <canvas> 標簽用於繪制圖像（通過腳本，通常是 JavaScript）。
不過，<canvas> 元素本身並沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。
getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。
本手冊提供完整的 getContext("2d") 對象屬性和方法，可用於在畫布上繪制文本、線條、矩形、圓形等等。
瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其屬性和方法。
一.畫圖
現實生活中，畫圖需要考慮：
畫布
筆
1.線條的粗細；
2.線條的顏色；
3.線條的虛實；
畫線
1.起點；
2.終點；
畫圓
1.圓點；
2.半徑；
3.實心、空心
畫矩形
1.矩形的左上起點；
2.矩形的長、寬；
文本
1.字體樣式；
2.實心、空心；
添加圖片等
二.畫圖API
根據畫圖需要，canvas有以下API
canvas主要屬性和方法
canvas的API顏色、樣式和陰影屬性和方法
Canvas的API-線條樣式屬性和方法
Canvas的API-矩形方法
Canvas的API-路徑方法
Canvas的API-轉換方法
Canvas的API-文本屬性和方法
Canvas的API-圖像繪制方法
Canvas的API-像素操作方法和屬性
Canvas的API-圖像合成屬性
三.canvas簡單畫圖
3.1canvas API練習
<!doctype html> <html> <head></head> <body> <canvas width="500" height="800" style="background:yellow" id="canvas"> 您的瀏覽器當前版本不支持canvas標簽 </canvas> <script> //獲取畫布DOM 還不可以操作 var canvas=document.getElementById('canvas'); //alert(canvas); //設置繪圖環境 var cxt=canvas.getContext('2d'); //alert(cxt); //畫一條線段。 //開啟新路徑 cxt.beginPath(); //設定畫筆的寬度 cxt.lineWidth=10; //設置畫筆的顏色 cxt.strokeStyle="#ff9900"; //設定筆觸的位置 cxt.moveTo(20,20); //設置移動的方式 cxt.lineTo(100,20); //畫線 cxt.stroke(); //封閉路徑 cxt.closePath(); //畫一個空心圓形 凡是路徑圖形必須先開始路徑，畫完圖之后必須結束路徑 //開始新路徑 cxt.beginPath(); //重新設置畫筆 cxt.lineWidth=3; cxt.strokeStyle="green"; cxt.arc(200,200,50,0,360,false); cxt.stroke(); //封閉新路徑 cxt.closePath(); //畫一個實心圓形 cxt.beginPath(); //設置填充的顏色 cxt.fillStyle="rgb(255,0,0)"; cxt.arc(200,100,50,0,360,false); cxt.fill(); cxt.stroke(); cxt.closePath(); //畫一個矩形 cxt.beginPath(); cxt.rect(300,20,100,100); cxt.stroke(); cxt.closePath(); //其他方法 建議使用此方式 cxt.strokeRect(300,150,100,100) //實心矩形 cxt.beginPath(); cxt.rect(300,270,100,100); cxt.fill(); cxt.closePath(); //其他方法 建議使用此方式 cxt.fillRect(300,390,100,100); //設置文字 cxt.font="40px 宋體";//css font屬性 cxt.fillText("jingwhale",20,300); //將筆觸設置為1像素 cxt.lineWidth=1; cxt.strokeText("jingwhale",20,350); //畫圖 把一幅圖片畫到畫布中 注意webkit內核的瀏覽器 chrome和獵豹不支持 var img =new Image(); img.src="xiaomm.jpg"; cxt.drawImage(img,20,370,230,306); //畫一個三角形 cxt.beginPath(); //移動至開始點 cxt.moveTo(300,500); cxt.lineTo(300,600); cxt.lineTo(400,550); cxt.closePath();//填充或者畫路徑需要先閉合路徑再畫 cxt.stroke(); //實心三角形 cxt.beginPath(); //移動至開始點 cxt.moveTo(300,600); cxt.lineTo(300,700); cxt.lineTo(400,650); cxt.closePath(); cxt.fill(); //旋轉圖片 圖片 //設置旋轉環境 cxt.save(); //在異次元空間重置0,0點的位置 cxt.translate(20,20); //圖片/形狀旋轉 //設置旋轉角度 參數是弧度 角度 0-360 弧度=角度*Math.PI/180 cxt.rotate(-30*Math.PI/180); //旋轉一個線段 cxt.lineWidth=10; cxt.beginPath(); cxt.moveTo(0,0); cxt.lineTo(20,100); cxt.stroke(); cxt.closePath(); //將旋轉之后的元素放回原畫布 cxt.restore(); //過程不可顛倒 先設置00點在旋轉角度，然后畫圖 //旋轉圖片 cxt.save(); cxt.translate(20,370); cxt.rotate(-10*Math.PI/180); var img =new Image(); img.src="xiaomm.jpg"; cxt.drawImage(img,0,0,230,306); cxt.restore(); </script> </body> </html>
3.2畫圖流程
1.設置、獲取畫布DOM；
2.設置繪圖環境
var cxt=canvas.getContext('2d');
3.開啟新路徑cxt.beginPath();
4.設定畫筆的寬度
cxt.lineWidth=10;
5.設置畫筆的顏色
cxt.strokeStyle="#ff9900";6.依據API畫圖
7.封閉路徑
cxt.closePath();
3.3canvas 作業-星球運轉
//獲取canvas繪圖環境 var context = document.getElementById('canvas').getContext('2d'); var time = 0; //星球軌道 function drawTrack(){ for(var i = 0; i < 8; i++){ //開始路徑 context.beginPath(); context.arc(500,500,(i+1)*50,0,360,false); //關閉路徑 context.closePath(); context.strokeStyle = '#fff'; context.stroke(); } } //執行以下此函數，畫出各星球的軌道 drawTrack(); //星球 星球對象的構造方法 實例化后能畫出所有的星球 function Star(x,y,radius,sColor,eColor,cycle){ //星球需要的哪些屬性 //星球的坐標點 this.x = x; this.y = y; //星球的半徑 this.radius = radius; //星球的顏色 this.sColor = sColor; this.eColor = eColor; //公轉周期 this.cycle = cycle; //繪畫出星球 this.draw = function(){ //異次元空間進行繪畫 context.save(); //重設0,0坐標點 context.translate(500,500); //設置旋轉角度 context.rotate(time*360/this.cycle*Math.PI/180); context.beginPath(); context.arc(this.x,this.y,this.radius,0,360,false); context.closePath(); //星球的填充色(徑向漸變 開始色和結束色) this.color = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius); this.color.addColorStop(0,this.sColor); this.color.addColorStop(1,this.eColor); context.fillStyle = this.color; context.fill(); context.restore(); time +=1; } } //各星球構造方法 從star中繼承 function Sun(){ Star.call(this,0,0,20,'#f00','#f90',0); } function Mercury(){ Star.call(this,0,-50,10,'#A69697','#5C3E40',87.70); } function Venus(){ Star.call(this,0,-100,10,'#C4BBAC','#1F1315',224.701); } function Earth(){ Star.call(this,0,-150,10,'#78B1E8','#050C12',365.2422); } function Mars(){ Star.call(this,0,-200,10,'#CEC9B6','#76422D',686.98); } function Jupiter(){ Star.call(this,0,-250,10,'#C0A48E','#322222',4332.589); } function Saturn(){ Star.call(this,0,-300,10,'#F7F9E3','#5C4533',10759.5); } function Uranus(){ Star.call(this,0,-350,10,'#A7E1E5','#19243A',30799.095); } function Neptune(){ Star.call(this,0,-400,10,'#0661B2','#1E3B73',164.8*365); } //各星球對象的實例化 var sun = new Sun(); var water = new Mercury(); var gold = new Venus(); var diqiu = new Earth(); var fire = new Mars(); var wood = new Jupiter(); var soil = new Saturn(); var sky = new Uranus(); var sea = new Neptune(); function move(){ //清除畫布 context.clearRect(0,0,1000,1000); //重新繪制一遍軌道 drawTrack(); sun.draw(); water.draw(); gold.draw(); diqiu.draw(); fire.draw(); wood.draw(); soil.draw(); sky.draw(); sea.draw(); } //星球圍繞太陽運動起來 setInterval(move,100);
四.canvas畫圖實例-網頁畫圖
源代碼：https://github.com/jingwhale/online-canvas
1.畫圖板功能分析
功能區(保存、清空)
工具區(形狀和工具)
屬性設置區(顏色和線寬)
繪圖區域(canvas標簽)
2.技術需求分析
頁面布局->HTML5標簽
頁面美化->CSS2
功能設置->Javascript編程
Canvas API->屬性設置、畫線、寫字、畫圖、畫布操作(清空、獲取畫布信息)、
下載->php的下載(JS無法操作本地文件)
3.畫一個簡單的畫布
鼠標點擊時
准備起始點 moveTo()、設置標志位
鼠標移動時
判斷標志位，值為true畫圖，false不畫圖
移動時指定路徑lineTo()，並且畫出來stroke()
鼠標離開或者抬
清空標志位
4.復雜的在線畫板
獲取相應元素對象
設置點擊狀態
設置觸發功能
顏色屬性設置
線寬屬性設置
繪圖形狀設置
工具指定
5.html結構部分：
6.畫圖技術點：
整個畫圖被鼠標事件所控制
鼠標按下的事件-》mousedown
鼠標移動的事件-》mousemove
鼠標抬起事件-》mouseup
//鼠標按下的時候-》設置開始點 canvas.onmousedown=function(evt){
//鼠標移動的時候-》不同的繪圖（獲取鼠標的位置） canvas.onmousemove=function(evt){}
//鼠標抬起的時候結束繪圖 canvas.onmouseup=function(){
-------------------------------------------------------------------------------------------------------------------------------------
完
轉載需注明轉載字樣，標注原作者和原博文地址。
更多閱讀：