c html5画布 游戏,【HTML5】Canvas-------HTML5与OC绘制的简单对比&&HTML5简单绘制

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、建构一个画布

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的结合理解，望能够帮助更多的人理解图形绘制。