【HTML5】Canvas-------HTML5与OC绘制的简

HTML5里最让我沉醉的，也是最吸引人注意的就是Canvas和JavaScript，这两者的结合，更是让我感到“代码也可以变得如此迷人”。

---

HTML5与OC绘制的简单对比

实际上OC和HTML5在图形绘制上很像。

在OC语言中

CGContent cont = UIGraphicsGetCurrentContext()； 获取画布
CGPointMake 制造坐标点
CGContextAddLines（context, aPoint, int） 添加线段
CGContextDrawPath 开始绘制
CGContextSetStrokeColorWithColor 线框颜色

在HTML5中

var canvas_one = document.getElementById(id); 获取画布
moveTo 制造坐标点
lineTo 制造其他坐标，连接成线（类似于OC的添加线段）
content.stroke() 开始绘制
content.strokeStyle 线框颜色

OC和HTML5图形的绘制上面都大同小异，他们彼此之间都有绘制线段、线条、矩形、圆形、扇形、曲线、图形填充、渐变填充。

PS：对比未完，本人只抽取了基础绘制进行讲解

HTML5简单绘制

1、建构一个画布 <canvas></canvas>
2、设置绘制内容
3、调用绘制于现实

线段的绘制

function drawStangel() {  
  //画一条 
   var canvas_one = document.getElementById("canvasone"); 
   if (canvas_one.getContext) {     
   var content = canvas_one.getContext("2d");    
    //至关重要，参数必须写2d，表示要做平面绘图  
  }  
 content.beginPath(); 
 content.moveTo(5,5);//起点  
 content.lineTo(200,10);//终点坐标 
 content.lineWidth = 5.0;//线框度  
 content.strokeStyle = '#CC0000';//线颜色    
 content.stroke();
}
drawStangel();

以上代码完成的画线.png

绘制内容步骤

1.获取画布
2.告诉计算机我要进行平面绘制
3.准备绘制
4.建构绘制点及其属性
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); 
   //这里第二个参数很重要赋值！=150    
ContenofBeisizer.stroke();
}
Beisizer();

曲线绘制.png
PS：（贝塞尔曲线内容丰富，可以单独研究一下它，所有的贝塞尔绘制都是如出一辙的，掌握了贝塞尔曲线的真理，在其他编程语言里对于绘图也会获益匪浅的）
推荐阅读，贝塞尔曲线的绘制详解

//OC的贝塞尔曲线绘制
 //二次曲线  
    CGContextMoveToPoint(context, 120, 300);//设置Path的起点  
    CGContextAddQuadCurveToPoint(context,190, 310, 120, 390);//设置贝塞尔曲线的控制点坐标和终点坐标  
    CGContextStrokePath(context);  
    //三次曲线函数  
    CGContextMoveToPoint(context, 200, 300);//设置Path的起点  
    CGContextAddCurveToPoint(context,250, 280, 250, 400, 280, 300);//设置贝塞尔曲线的控制点坐标和控制点坐标终点坐标  
    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';  //阴影颜色
    //下面是设置canvastwo的属性
    contentShadow.fillStyle = '#FFAEB9';   //canvas图形填充颜色
    contentShadow.fillRect(5,5,200,150);  //canvas图形建构
}
shadow();

阴影效果图.png

对于阴影图形的绘制与OC比较起来，HTML5是较为容易理解的。

文章内容不难，本人开发iOS有些时间了，结合HTML5理解了一下简单绘制，如有不正确的地方可以一起来探讨。OC与HTML5的结合理解，望能够帮助更多的人理解图形绘制。