HTML5里最讓我沉醉的，也是最吸引人注意的就是Canvas和JavaScript，這兩者的結(jié)合，更是讓我感到“代碼也可以變得如此迷人”。

HTML5與OC繪制的簡單對比

實際上OC和HTML5在圖形繪制上很像。

在OC語言中

CGContent cont = UIGraphicsGetCurrentContext()； 獲取畫布
CGPointMake 制造坐標(biāo)點
CGContextAddLines（context, aPoint, int） 添加線段
CGContextDrawPath 開始繪制
CGContextSetStrokeColorWithColor 線框顏色

在HTML5中

var canvas_one = document.getElementById(id); 獲取畫布
moveTo 制造坐標(biāo)點
lineTo 制造其他坐標(biāo)，連接成線（類似于OC的添加線段）
content.stroke() 開始繪制
content.strokeStyle 線框顏色

OC和HTML5圖形的繪制上面都大同小異，他們彼此之間都有繪制線段、線條、矩形、圓形、扇形、曲線、圖形填充、漸變填充。

PS：對比未完，本人只抽取了基礎(chǔ)繪制進(jìn)行講解

HTML5簡單繪制

1、建構(gòu)一個畫布 <canvas></canvas>
2、設(shè)置繪制內(nèi)容
3、調(diào)用繪制于現(xiàn)實

線段的繪制

function drawStangel() {  
  //畫一條 
   var canvas_one = document.getElementById("canvasone"); 
   if (canvas_one.getContext) {     
   var content = canvas_one.getContext("2d");    
    //至關(guān)重要，參數(shù)必須寫2d，表示要做平面繪圖  
  }  
 content.beginPath(); 
 content.moveTo(5,5);//起點  
 content.lineTo(200,10);//終點坐標(biāo) 
 content.lineWidth = 5.0;//線框度  
 content.strokeStyle = '#CC0000';//線顏色    
 content.stroke();
}
drawStangel();

以上代碼完成的畫線.png

繪制內(nèi)容步驟

1.獲取畫布
2.告訴計算機(jī)我要進(jìn)行平面繪制
3.準(zhǔn)備繪制
4.建構(gòu)繪制點及其屬性
5.開始繪制

貝塞爾曲線的繪制

function Beisizer() { 
   var beisizer = document.getElementById("canvasone"); 
   if (beisizer == null){    
    return false;   
 }  
  var ContenofBeisizer = beisizer.getContext("2d");  
  ContenofBeisizer.moveTo(50,50); 
  ContenofBeisizer.bezierCurveTo(50 , 50 , 150, 50, 150, 150);    
  ContenofBeisizer.stroke(); 
  ContenofBeisizer.quadraticCurveTo(150, 250, 250, 250); 
   //這里第二個參數(shù)很重要賦值！=150    
ContenofBeisizer.stroke();
}
Beisizer();

曲線繪制.png

//OC的貝塞爾曲線繪制
 //二次曲線  
    CGContextMoveToPoint(context, 120, 300);//設(shè)置Path的起點  
    CGContextAddQuadCurveToPoint(context,190, 310, 120, 390);//設(shè)置貝塞爾曲線的控制點坐標(biāo)和終點坐標(biāo)  
    CGContextStrokePath(context);  
    //三次曲線函數(shù)  
    CGContextMoveToPoint(context, 200, 300);//設(shè)置Path的起點  
    CGContextAddCurveToPoint(context,250, 280, 250, 400, 280, 300);//設(shè)置貝塞爾曲線的控制點坐標(biāo)和控制點坐標(biāo)終點坐標(biāo)  
    CGContextStrokePath(context);  

HTML5和OC的貝塞爾曲線繪制是不是有特別像啊，他們的步驟都差不多一致。

陰影圖形的繪制

function shadow() { 
   var shadow = document.getElementById("canvastwo");  
  if (shadow == null){    
    return false; 
   } 
   var contentShadow = shadow.getContext("2d");    
   contentShadow.shadowOffsetX = 20;  //陰影偏移x軸
   contentShadow.shadowOffsetY = 15; //陰影偏移y軸
   contentShadow.shadowBlur = 10; //陰影模糊程度
   contentShadow.shadowColor = '#CFCFCF';  //陰影顏色
    //下面是設(shè)置canvastwo的屬性
    contentShadow.fillStyle = '#FFAEB9';   //canvas圖形填充顏色
    contentShadow.fillRect(5,5,200,150);  //canvas圖形建構(gòu)
}
shadow();

陰影效果圖.png

對于陰影圖形的繪制與OC比較起來，HTML5是較為容易理解的。

文章內(nèi)容不難，本人開發(fā)iOS有些時間了，結(jié)合HTML5理解了一下簡單繪制，如有不正確的地方可以一起來探討。OC與HTML5的結(jié)合理解，望能夠幫助更多的人理解圖形繪制。