相识HTML5 canvas

发表于 由

Canvas是HTML的API，我们可以用它在网页中实时的来生成图像。

文章导读

　　1.必备技能

　　2.用于画图的函数

　　　　例子：

　　　　　　-会话气泡-    -心形-    -钟表-     　-星球里的星星-

　　　　　　-调色板-      -鼠标绘图-      -旋转的小方块-

　　3.图像的处理

　　　　例子：

　　　　　　-图像的灰度和翻转效果-     -拾色器-

　　　　　　-放大镜-      -图像的高斯模糊-　　　　

一.必备技能

<canvas id="Canvas" width="400" height="200">
    不支持canvas的浏览器，你就会看到这句话！
</canvas>

控制它的宽高是要写在行内样式中的，像上面那样。这样我们就有了一个canvas元素，然后我们就可以去操作它了：

var canvas = document.getElementById('Canvas');

if (canvas.getContext) {
    var content = canvas.getContext('2d');
}

获取元素的同时，还要获取canvas的2D绘图环境。要是用于3D绘图的话，就要用WebGL了。

 

二.用于画图的函数

然后，我们要开始在画布上绘图了。它的画布是这样的网格：

   

2.1矩形

canvas中只支持这一种形状的函数，别的形状就都要自己组合来实现了。

fillRect(x, y, width, height) //画一个填充的矩形
strokeRect(x, y, width, height) //画一个只有边框的矩形
clearRect(x, y, width, height) //清除指定的矩形区域

其中的（x,y）是指矩形左上角的坐标。

［查看源码］［运行结果］

2.2路径

1.首先，创建一条路径－－beginPath() 
2.然后，通过一些绘图的方法做一些绘图操作
3.然后关闭路径－－closePath()
4.我们已经把路径创建好了，然后就是填充或者绘制路径到我们的画布上－－stroke()/fill()

比如说画一个三角形：

［查看源码］［运行结果］

需要注意的是其中两个三角形，颜色不同，一不小心可能会出问题，所以我们有时可能需要save()和restore()函数的帮助来达到局部作用的效果。比如上面示例源码中所做的那样：

View Code

canvas还提供了两个移动画笔的函数：

moveTo(x, y) //将画笔移动到指定的(x,y)的位置
lineTo(x, y) //在当前画笔的位置到指定的(x,y)位置画一条线

尝试一下moveTo()方法我们可以画个笑脸：

    

［查看源码］［运行结果］

结合使用moveTo和lineTo方法，我们可以实现鼠标像画笔一样在画板上绘图的效果：

［查看源码］［运行结果］

然后我们严格的按照上面说的规范步骤，1，2，3，4并结合画圆的函数，可以自己绘制一个钟表，稍加改进就是个嘀嗒嘀嗒走的时钟了：

 

［查看源码］［运行结果］

 2.3文字

fillText('要显示的文本'，x坐标，y坐标)此方法不支持文本断行，要显示多行文本只能多次调用

通过fillText()方法我们可以在canvas画布上写文字：

［查看源码］［运行结果］

2.4圆形和扇形

复制代码
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

(x,y)－－圆心坐标
radius－－半径
startAngle－－扇形的起始角度（弧度）
endAngle－－扇形的终止角度（弧度）
anticlockwise－－做图时是顺时针画（true）还是逆时针（false）画
复制代码

［查看源码］［运行结果］

结合对rgb颜色的相关操作，我们可以做出类似调色板的效果：

         

［查看源码］［运行结果］

2.5不规则图形

我们可以通过画曲线来得到不规则的图形，canvas为我们提供了两个高大上的函数：

复制代码
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
#quadraticCurveTo(cp1x, cp1y, x, y)
(cp1x,cp1y)－－控制点
此函数表示从当前的画笔位置到（x，y）画一条二次曲线
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
#bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
(cp1x,cp1y)－－控制点1  (cp2x,cp2y)－－控制点2
此函数表示从当前的画笔位置到（x，y）画一条bezier曲线
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
复制代码

这两个曲线具体含义我也不太清楚，但大概是这个样子：

   

 

试一下quadraticCurveTo函数：

      

［查看源码］［运行结果］

试一下bezierCurveTo函数：

    

［查看源码］［运行结果］

2.6渐变和阴影

复制代码
＃渐变：
var myGradient = ctx.createLinearGradient(x1, y1, x2, y2); 
(x1,y1)－－起点坐标  (x2,y2)－－终点坐标
myGradient.addColorStop(0, "#BABABA"); 
－－添加起始颜色
myGradient.addColorStop(1, "#636363");
－－添加终止的颜色

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

＃阴影
ctx.shadowOffsetX = 10; // 设置水平位移
ctx.shadowOffsetY = 10; // 设置垂直位移
ctx.shadowBlur = 5; // 设置模糊度
ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色
复制代码

一个也不太搭边儿的例子，不管怎么说，也用到了渐变呢：

［查看源码］［运行结果］

这里面用到了clip（）方法来实现星星，这跟某css属性clip－path比较神似，我以前尝试过：

请戳［源码］［示例］

2.7变换

canvas中有我们熟悉的几个变换函数：

复制代码
translate(x, y) －－平移
rotate(angle) －－旋转
scale(x, y) －－缩放
transform(a, b, c, d, e, f) －－变换
上面的变换函数是根据变换矩阵进行的：
   a   c   e
［ b   d   f ］
   0   0   1
复制代码

简单的小例子：

［查看源码］［运行结果］

 

三.图像处理

复制代码
var myImageData = ctx.createImageData(width, height);
ctx.getImageData(left, top, width, height);//读取canvas的内容，返回一个对象且该对象有一个data属性，可以供我们操作页面的像素。
ctx.putImageData(myImageData, dx, dy);//将操作好的对象重新绘制在画布中
ctx.drawImage(img, 0, 0); // 我们常用的drawImage方法，设置对应的图像对象，以及它在画布上的位置
复制代码

通过getImageData()方法获取到图像对象，访问它的data属性就可以得到一个像素数组，我们对像素进行处理，使我们可以用canvas处理图像。

3.1 灰度效果

灰度图（grayscale）就是取红、绿、蓝三个像素值的算术平均值，这实际上将图像转成了黑白形式。假定d[i]是像素数组中一个象素的红色值，则d[i+1]为绿色值，d[i+2]为蓝色值，d[i+3]就是alpha通道值。转成灰度的算法，就是将红、绿、蓝三个值相加后除以3，再将结果写回数组。

View Code

3.2 复古效果

复古效果（sepia）则是将红、绿、蓝三个像素，分别取这三个值的某种加权平均值，使得图像有一种古旧的效果。

View Code

3.3 反转效果

反转效果（invert）是指图片呈现一种色彩颠倒的效果。算法为红、绿、蓝通道都取各自的相反值（255-原值）。

View Code

我尝试了一下灰度图的效果和反转图的效果：

［查看源码］

注意，在我们自己本地写demo准备运行查看结果的时候，getImageData()方法可能会有问题，比如说报这个错：Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data

我们知道这是域和本地运行等相关的问题，这时我们自己本地启用服务器，localhost访问就可以了。

 3.4 拾色器

实现思路：通过getImageData(x,y,1,1)获得当前鼠标所在位置的一像素的图像对象，通过其data属性操作拿到它的像素值，也就是我们想得到的rgb值。

［查看源码］

3.5 放大镜

 实际上drawImage方法可以有多个参数，提供更加丰富的功能：

1  ctx.drawImage(image, dx, dy);
2  ctx.drawImage(image, dx, dy, dWidth, dHeight);
3  ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

各个参数就像下面的示意图这样：

然后我们就可以使用drawImage方法在原图像变换到绘制的图像中做一个等比放大的操作，就可以实现放大镜的效果啦。

「查看源码」

3.6图像的高斯模糊

其实，css中有一个兼容性不那么好的filter属性，可以简单的实现图像模糊的效果：

 -webkit-filter: blur(20px); /* Chrome, Opera */
    -moz-filter: blur(20px);
     -ms-filter: blur(20px);    
         filter: blur(20px);

「查看源码」

但是使用canvas可以实现真正意义上的高斯模糊（就是算法那种balabala的）。

这里有一个实现的很好的高斯模糊的js：「StackBlur」

使用它我们就可以轻松的实现图像的高斯模糊了：「查看源码」

 

文章中的源码Demo都放在了github上，打开可能会有些慢，如果第一次打不开，刷新一下也会好了。 

四.资源

canvas中绘图环境所有的属性和方法都可以在这里找到：「CanvasRenderingContext2D interface」

「使用CSS将图片转换成模糊(毛玻璃)效果」

「Canvas API」

「javascript标准参考教程Canvas」

  1. da shang
    donate-alipay
               donate-weixin weixinpay

发表评论↓↓