H5 Canvas 基本使用

Canvas 基本使用

• Canvas 是为了解决 Web 页面中只能显示静态图片这个问题而提出的，一个可以使用 JavaScript 等脚本语言向其中绘制图像的 HTML 标签
• Canvas，若没有设置宽高，那么会自动创建一个 300 * 150 的画布（单位默认为 px）
• 设置canvas宽高的两种方式：HTML标签上设置或者JS设置，注意不能用CSS设置（会被拉伸）

// 方式1：OK
<canvas id="canvas" width="400" height="400">
// 方式2：OK
var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var cx = canvas.width = 400;
    var cy = canvas.height = 400;...
// 方式3：wrong !!!
#canvas {
    background: #000;
    width: 400px;
    height: 400px;
}:

• 获取 Canvas 对象

// contextType一般取‘2d’，第二个参数几乎不用
canvas.getContext(contextType, contextAttributes);

• Canvas API
  几何图形类

fill()  填充路径
stroke()    描边
arc()   创建圆弧
rect()  创建矩形
fillRect()  绘制矩形路径区域
strokeRect()    绘制矩形路径描边
clearRect() 在给定的矩形内清除指定的像素
arcTo() 创建两切线之间的弧/曲线
beginPath() 起始一条路径，或重置当前路径
moveTo()    把路径移动到画布中的指定点，不创建线条
lineTo()    添加一个新点，然后在画布中创建从该点到最后指定点的线条
closePath() 创建从当前点回到起始点的路径
clip()  从原始画布剪切任意形状和尺寸的区域...

渐变类：

createLinearGradient()  创建线性渐变（用在画布内容上）
createRadialGradient()  创建放射状/环形的渐变（用在画布内容上）
addColorStop()  规定渐变对象中的颜色和停止位置\

图形变换类：

scale() 缩放当前绘图至更大或更小
rotate()    旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵

图像绘制类：

getImageData(x,y,width,height) // 返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Canvas 进阶

• 制作炫酷网页背景特效的特点
  1、渐变背景（body 设置线性渐变，同级div颜色动画，canvas 透明即可）
  2、炫酷 (随机的运动，比如随机粒子，每次擦除画布重绘时，改变粒子的位置、大小、透明度等)。运动的效果本质是画布的擦除和重绘。
  3、特效（与用户交互，如鼠标跟随和视觉差，监听鼠标移动事件）

Canvas 特效实例分析

...

参考

• 如何使用 Canvas 制作出炫酷的网页背景特效