初识canvas

Posted 2020-08-13

· Canvas的基本用法
· <canvas> 标签只有两个属性—— width和height，canvas会初始化宽度为300像素和高度为150像素
· getContext()方法是用来获得渲染上下文和它的绘画功能
· <canvas>默认的是inline,所以如果要利用margin居中，就必须设置width和block
· 绘制矩形：
fillRect(x, y, width, height) 绘制一个填充的矩形
strokeRect(x, y, width, height) 绘制一个矩形的边框
clearRect(x, y, width, height) 清除指定矩形区域，让清除部分完全透明。
· 绘制路径：
beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。
stroke() 通过线条来绘制图形轮廓。
fill() 通过填充路径的内容区域生成实心的图形。
· 移动笔触：moveTo(x, y) 将笔触移动到指定的坐标x以及y上
· 绘制直线路径：lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线
· 绘制圆弧路径：
arc(x, y, radius, startAngle, endAngle, anticlockwise) 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
arcTo(x1, y1, x2, y2, radius) 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
角度与弧度的js表达式:radians=(Math.PI/180)*degrees
· Path2D 对象：用来缓存或记录绘画命令，这样将能快速地回顾路径
new Path2D(); 空的Path对象
Path2D.addPath(path [, transform])? 想要从几个元素中来创建对象时，添加了一条路径到当前路径（可能添加了一个变换矩阵）
· 使用 SVG paths：
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
这条路径将先移动到点 (M10 10) 然后再水平移动80个单位 (h 80)，然后下移80个单位 (v 80)，接着左移80个单位 (h -80)，再回到起点处 (z)。
· 色彩 Colors
fillStyle = color 设置图形的填充颜色
strokeStyle = color 设置图形轮廓的颜色
· 透明度 globalAlpha = transparencyValue 这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
· 线型 Line styles
lineWidth = value 设置线条宽度，宽度为奇数的线并不能精确呈现
lineCap = type 设置线条末端样式。
lineJoin = type 设定线条与线条间接合处的样式。
miterLimit = value 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
setLineDash(segments) 设置当前虚线样式,segments是一个数组,依次是虚线长和间距长
lineDashOffset = value 设置虚线样式的起始偏移量。正数时向逆时针
getLineDash() 返回一个包含当前虚线样式，长度为非负偶数的数组。