H5绘图技术之canvas

H5绘图技术之canvas

新加入的绘图技术，成为HTML5的一大亮点，让我简单了解一下这个技术的核心要点吧。

l        canvas简介

SVG,VML与canvas都是用来绘图的手段，略有不同

canvas元素及其API,再结合JS就可以实现控制画布上的每一个像素。创建画布语法<canvaswidth=200 height=200 id="djx" style="border:1px solidred;"></canvas>。绘图API定义在通过画布的getContext()方法获得的对象上

l        绘制文字

绘制文字可以调用两个函数：fillText()以填充方式，strokeText()以描边方式。在绘制之前都要先指定fillStyle,font,textBaseline等属性

l        绘制简单图形

绘制矩形：fillRect()填充方式需要结合fillStyle来修饰，strokeRect()描边方式需要结合strokeStyle来修饰，clearRect()指清除矩形区像素

绘制其他图形【如直线，三角形，圆形等】：绘制矩形以外图形需要用路径，常用函数beginPath(),moveTo(),lineTo(),arc(),closePath()【非必须】，设置样式lineWidth，strokeStyle,fillStyle等【有默认值】，stroke(),fill()【路径自动闭合】

l        绘制渐变图形

步骤：创建渐变对象，为其设置颜色，再把渐变对象赋给上下文对象的颜色属性[strokeStyle,fillStyle]，最后用上下文对象会不同图形

线性渐变：context的createLinearGradient()函数创建LinearGradient对象，这个对象创建线性渐变，它用addColorStop（）函数设置渐变颜色

径向渐变：context的createRadialGradient()函数创建RadialGradient对象。

l        绘制变形图形

保存恢复：save()和restore()函数都是用来保存和恢复绘画状态的

输出图形：用toDataURL()方法，该方法将图形输出为DataURL,便于再次使用

坐标变换：平移translate()函数；缩放scale()函数；旋转rotate()函数

变换矩阵：context.transform();这个方法可以实现“坐标变换”的任何功能，必要时可以使用setTransform()将变换矩阵进行重置

l        组合图形

通过context.globalCompositeOperation=type;实现其中“type”的具体值有多种

l        阴影效果

通过设置上下文对象context对象的相关属性实现阴影效果：shadowOffsetX,shadowOffsetY,shadowBlur,shodowColor等

l        图像的简单操作

绘制图像context.drawImage();

图像平铺：方法一是上面的drawImage()函数循环实现，方法二是用createPattern()函数设置平铺样式，然后将样式指定给上下文对象的fillStyle属性

图像裁剪和复制：裁剪通过clip()函数实现，复制通过drawImage()实现