【HTML5】Canvas-------HTML5與OC繪制的簡單對比&&HTML5簡單繪制

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

PS:(貝塞爾曲線內(nèi)容豐富,可以單獨研究一下它,所有的貝塞爾繪制都是如出一轍的,掌握了貝塞爾曲線的真理,在其他編程語言里對于繪圖也會獲益匪淺的)
推薦閱讀,貝塞爾曲線的繪制詳解

//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é)合理解,望能夠幫助更多的人理解圖形繪制。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一:canvas簡介 1.1什么是canvas? ①:canvas是HTML5提供的一種新標(biāo)簽 ②:HTML5 ...
    GreenHand1閱讀 4,708評論 2 32
  • 書中代碼示例效果展示:Core HTML5 Canvas Examples 基礎(chǔ)知識 canvas元素 canva...
    szu_bee閱讀 2,866評論 2 28
  • 一、canvas簡介 1.1 什么是canvas?(了解) 是HTML5提供的一種新標(biāo)簽 Canvas是一個矩形區(qū)...
    Looog閱讀 3,959評論 3 40
  • --繪圖與濾鏡全面解析 概述 在iOS中可以很容易的開發(fā)出絢麗的界面效果,一方面得益于成功系統(tǒng)的設(shè)計,另一方面得益...
    韓七夏閱讀 2,773評論 2 10
  • 我每天都送孩子去幼兒園,其實這件事情在孩子的爺爺奶奶接下“交接棒”的時候,曾想過“偷懶”。在家里吃完早餐直接上班,...
    茉莉大大閱讀 204評論 0 1