浅析HTML5的Canvas——1

一.Canvas的基本介绍

  • 1.什么是Canvas

定义:是HTML5提供的一种新标签, ie9才开始支持的,Canvas是一个矩形区域的画布,是使用js的一个api接口,可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
用canvas作画。直接在HTML架构中写一个canvas即可:

创建画布
<canvas id="cvs" width="800" height="600">你的浏览器不支持canvas</canvas>

其中标签里面的文字是给不支持canvas的浏览器看的,支持的永远看不到。这个画布的特性有必要说一下,他有两个原生的属性,即width和height。通常我们使用它自身的宽高属性来设置它的宽高,除非特殊情况,一定不要用css来定义Canvas的宽高。

  • 之后使用js自网页上绘制,基本分为三个步骤:
  1. 画布有了,现在我们把他拿出来:
var cvs = document.getElementById('cvs');
  1. 画笔现在画布已经有了,想往上面涂鸦,当然还需要一只笔。canvas取得笔的方法如下:
var ctx = cvs.getContext('2d');
  1. 调用画笔下相关方法绘制图案:
ctx.beginPath();  //3、1开始绘制
ctx.moveTo(10,10);  //3、2放置起点的坐标
ctx.lineTo(10,210);  //3、3放置画笔的途径点坐标
ctx.lineTo(210,210);            
ctx.closePath();  //把起点和结束点连接起来,形成一个闭合的图案
 ctx.stroke()  //3、4绘制线条

此时在页面上就可以看到西面的效果:


页面输出效果

到这里,想必大家对canvas已经有了一定的了解,下面来详细介绍canvas该如何绘制线条!

  • 2.Canvas绘制线条

在开始之前我们先拿出画布和画笔:

var cvs = document.getElementById('cvs'); //画布
var ctx = cvs.getContext('2d'); // 画笔

我们画画的时候,落笔点是不固定的,随时都会变。canvas虽然不是通过手来决定落笔点,但也有一个方法,就是moveTo。moveTo的作用相当于指定画笔放置的起点(即坐标):

ctx.moveTo(x,y);

我们必须开始画。先画最简单的:直线,画直线的方法即lineTo,他的参数和moveTo一样的,都是一个点:

ctx.lineTo(x,y);

下面我们就来实际画4条线围成一个矩形:

ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.stroke();

此时刷新,就能看到一个四边形了。
由上面的图形我们可以看出,默认的线条粗细是1px,而线条颜色是黑色。当然我们可以设置他们:

ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';

上面的代码把线条宽度设置成了10px,线条颜色变成了半透明的红色。

线条宽度设置成了10px

怎么左上角缺了一小块似得?这不是错觉。原因就是使用canvas的线条绘制,需要进行闭合,不然每一条由.lineTo()绘制出的线段都会自动连接起来,除了起点和终点。
所以我们需要用closePath(),来进行闭合:

ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.closePath();//闭合路径
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
ctx.stroke();

此时刷新,就是一个完美的正方形了。如图:


Canvas闭合路径 用closePath()

如果我想使矩形的边角变成圆角,有没有办法呢?当然有,就是lineJoin属性。lineJoin,意思即线的交汇处,有3个属性:miter(默认,尖角),bevel(斜角),round(圆角),如图:

lineJoin属性

通过前面图我们了解到,Canvas的线条两端是平的,可不可以改呢?毕竟平的不好看。也是可以的,即lineCap属性,这个就是定义线条的端点。lineCap有3个值:butt(平,默认),round(圆),square(方),如图:
lineCap属性

  • 3.Canvas填充和渐变

canvas的填充:
一般绘图的方式有两种,即填充和描边,前面的文章已经讲了描边的方法stroke,本文就讲一下Canvas中填充图形的方法。 填充即fill(),很直白吧?而且和strokeStyle表示描边样式一样,fillStyle即表示填充样式。默认的填充样式是不透明的黑色:

ctx.fillStyle = '颜色';    //设置填充颜色
ctx.fill();                //填充

canvas里提供了绘制矩形的方法:

ctx.strokeRect(x,y,w,h)   //x,y表示起始坐标;w,h表示宽高;

可以使用fillRect()直接填充一个矩形:

ctx.fillRect(x,y,width,height);

canvas的渐变:
在Canvas中,渐变色同样分为两种,即** 线性渐变 径向渐变 **,而且创建他们的方法也是独立的。

  • ** 创建线性渐变。createLinearGradient(译:创建线性渐变),的语法如下:**
createLinearGradient**(x1,y1,x2,y2);

有4个参数!x1,y1就是表示线性渐变的起点坐标,x2,y2就表示终点坐标。我们先创建一个水平的线性渐变试试吧:

var linear = ctx.createLinearGradient(100,100,200,100);

渐变创建了,开始填充。往渐变条里加颜色的方法是addColorStop(透明度,color).但要注意了,这个addColorStop不是加在画笔上,而是加在前面的那个保存渐变的变量上,我这里是canvas:

var canvas= ctx.createLinearGradient(100,100,200,100);
canvas.addColorStop(0,'#fff');
canvas.addColorStop(0.5,'#f0f');
canvas.addColorStop(1,'#333');

这时候,我们就可以填充渐变色了,但我们必须先把定义好的渐变赋给fillStyle:

var cvs = document.getElementById('cvs'); //画布
var ctx = cvs.getContext('2d'); // 画笔
var canvas= ctx.createLinearGradient(100,100,200,100);
canvas.addColorStop(0,'#fff');
canvas.addColorStop(0.5,'#f0f');
canvas.addColorStop(1,'#333');
ctx.fillStyle = canvas; //把渐变赋给填充样式
ctx.fillRect(100,100,100,100);
ctx.stroke();
渲染效果
  • ** 创建径向渐变。createRadialGradien(圆形渐变),的语法如下:**
createRadialGradient(x1,y1,r1,x2,y2,r2)

其中的x1,y1,x2,y2依旧表示起点和终点,不过这里的起点和终点都是一个圆,而x,y则是圆心的坐标。所以,r1与r2分别是起点圆的半径和终点圆的半径。

  • 在我的印象中,貌似径向渐变就是一个圆,圆心就是起点,圆的半径就是终点。但canvas里面的径向渐变不一样,起点一个圆,终点一个圆,和我的理解有差距。我们举最简单的例子。做一个很正规的径向渐变,即渐变圆形的圆心就是渐变的起点。由于正规的径向渐变,中心即圆心,所以我们应该尽量避免发生偏斜。那么,我们把终点圆的圆心与起点圆的圆心要重合:
var cvs = document.getElementById('cvs'); //画布
var ctx = cvs.getContext('2d'); // 画笔
var radial = ctx.createRadialGradient(55,55,10,55,55,55); //重合的圆心坐标
radial.addColorStop(0,'#fff');
radial.addColorStop(0.5,'#ff0');
radial.addColorStop(0.9,'#555');
radial.addColorStop(1,'#f00');
ctx.fillStyle = canvas; //把渐变赋给填充样式
ctx.fillRect(100,100,100,100);
ctx.stroke();

这里我设置的径向渐变起点圆和终点圆的圆心坐标相同,而起点圆半径为10,终点圆半径为55.最后画出的径向渐变范围是一个宽高110的圆形,说明渐变范围以终点圆的范围为准。

渲染效果

Canvas的基本介绍先介绍到这里,下一篇文章继续介绍canvas如何绘制曲线及绘制基本图形;如果对您有所帮助的话,请点赞并关注哦,我会不定时的更新一下自己学习的经验以及见解,和大家进行交流。

您赞就是是我最大的动力!!!

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,130评论 2 31
  • 啥是canvas? HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过, 元素本身...
    kiaizi阅读 540评论 0 4
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,254评论 3 40
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 1,151评论 0 4
  • 开疆拓边先行者 守土卫成后来人 智勇仁义驰天下 雄霸一方但称王
    星尘梦羽阅读 207评论 1 2
  • iOS 中的加密方式对比:http://www.cnblogs.com/xuan-yuan/p/5557939.h...
    爵笙彦阅读 171评论 0 0
  • 《Java编程思想》中有一段关于对象的说法: “按照通俗的说法,每个对象都是某个类(class)的一个实例(ins...
    xhanbao阅读 323评论 0 0