正在加载
请稍等

菜单

Home 码农菜园 前端视界 Canvas初探:基本语法
Home 码农菜园 前端视界 Canvas初探:基本语法

Canvas初探:基本语法

前端视界 by   阅读量 4,461

Canvas和SVG是Html5中出现的两大利器,我对SVG的了解和使用比较多,但是对Canvas还比较陌生。之前虽然在一些网站上看过Canvas的基本教程,但是不结合例子投入实战的话还是很难掌握,而且在很多情况下,Canvas的应用更加广泛,可以做出来的效果也更为炫酷,所以还是有必要花点功夫的。

1 基本知识

Canvas的使用方法是,在html中定义好<canvas></canvas>元素,然后在js中进行具体绘图操作,会使用到一个叫context的重要变量。

绘图语言的思路都是相通的,在使用context对Canvas进行操作时,会涉及到填充和描边等内容,分别对应fill和stroke,以及使用fillStyle和strokeStyle设置当前的全局绘图样式,这个和Processing很类似。颜色同css一样,可以使用颜色名称、十六进制、rgb和rgba。

具体的使用还是结合代码来说明好了。

2 绘制矩形

首先获得context变量。

之后使用以下代码绘制多个矩形。

使用context.clearRect(x, y, width, height)可以清除指定范围的内容。

3 绘制圆弧

和矩形类似,只不过用的函数不同。

4 绘制线段

绘制线段时会用到moveTo(x, y)和lineTo(x, y)两个函数,前者指定线段的起点,后者指定线段的终点。

  • 每次画线都从moveTo的点画到lineTo的点;
  • 如果没有moveTo,则第一次使用lineTo等同于使用moveTo,即指定一个起点;
  • 如果连续使用lineTo,则下一次的lineTo的起点为上一次lineTo指定的终点。

想想你拿着笔画线的过程吧,首先需要把笔放到纸上,之后可以连续画线,也可以在画完一条线之后把笔抬起、移动到另一个地方、再次放下、继续画线。

5 线性渐变

需要先指定一个线性渐变,然后将其设置为当前的全局填充选项。

线性渐变

6 径向渐变

径向渐变和线性渐变类似,不过参数更多一些。

同心圆渐变

如果径向渐变的起点和终点不重合,生成的渐变就是一个锥了。

径向渐变锥

7 图形变换

图形变换函数操作的是坐标系,不同的执行顺序可能会达到不同的最终效果。

当然,平移、缩放和旋转都可以用矩阵变换函数实现,即context.transform(),其原理是矩阵相乘,共有六个参数,比较麻烦,所以还是直接使用以上三个函数即可。

8 绘制阴影

阴影的参数有x偏移、y偏移、颜色、模糊范围。

9 绘制文字

文字属性包括字体、水平对齐方式、竖直对齐方式。

参考

玩转html5<canvas>画图

12 2016-08

发表评论