浅析HTML5的Canvas——1

2019年5月13日 226次阅读 来源: 天上的牛_有人吹

一．Canvas的基本介绍

  • １．什么是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绘制线条

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

《浅析HTML5的Canvas——1》 页面输出效果

到这里，想必大家对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，线条颜色变成了半透明的红色。

《浅析HTML5的Canvas——1》 线条宽度设置成了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();

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

《浅析HTML5的Canvas——1》 Canvas闭合路径 用closePath()

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

《浅析HTML5的Canvas——1》 lineJoin属性

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

《浅析HTML5的Canvas——1》 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();

《浅析HTML5的Canvas——1》 渲染效果

  • ** 创建径向渐变。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的圆形，说明渐变范围以终点圆的范围为准。

《浅析HTML5的Canvas——1》 渲染效果

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

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

    原文作者：天上的牛_有人吹
    原文地址: https://www.jianshu.com/p/63ff60496b82
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞