learn canvas, just some demo
- canvas-step-by-step
- 01 基础
- 放置画布
- 获取画布
- 获取画笔
- 02 画一条线
- 确定起点: moveTo(x, y)
- 确定终点: lineTo(x, y)
- 选择画笔
- 颜色: strokeStyle
- 粗细: lineWidth
- 开始画画
- fill(): 填充
- stroke(): 描边
- 03 多条线
- beginPath(): 绘制设置状态的起点
- 结束于: fill()、stroke()、closePath()
- 04 矩形
- closePath(): 绘制封闭图形，不使用可能导致缺口；不封闭的图形不要用，会自动绘制最后一笔
- fillStyle: 设置填充颜色（油漆桶）
- fill(): 填充
- 注意：状态与绘制分离
- 05 封装
- 06 线条属性
- lineCap: 上下文中线的端点
- butt: 默认值，端点是垂直于线段边缘的平直边缘
- round: 端点是在线段边缘处以线宽为直径的半圆
- square: 端点是在选段边缘处以线宽为长、以一半线宽为宽的矩形
- lineCap: 上下文中线的端点
- 07 线条属性
- lineJoin: 定义两条线相交产生的拐角，可将其称为连接。在连接处创建一个填充三角形，可以使用 lineJoin 设置它的基本属性
- miter: 默认值，在连接处边缘延长相接。miterLimit 是角长和线宽所允许的最大比例(默认是 10)
- bevel: 连接处是一个对角线斜角
- round: 连接处是一个圆
- lineWidth: 线宽（默认值为 1.0）
- strokeStyle: 笔触样式
- lineJoin: 定义两条线相交产生的拐角，可将其称为连接。在连接处创建一个填充三角形，可以使用 lineJoin 设置它的基本属性
- 10 填充颜色
- 基本颜色
- fillStyle，strokeStyle 属性，用来设置画布上形状的基本颜色和填充
- 渐变颜色
- 线性渐变: 创建一个水平、垂直、对角线的填充图案
- 径向渐变: 自中心点创建一个放射状填充
- 填充渐变形状的三个步骤：
- 添加渐变线
- 为渐变线添加关键颜色
- 应用渐变
- 基本颜色
- 01 基础
- index.html -- canvas 基础
- particle.html -- 实现随机粒子
用 HTML 或 JS 设置画布宽高，不要用 CSS，因为会缩放
var canvas = document.getElementById('canvas');
var context = canvas.getContext(contextType);
contextType:
- 2d
- webgl
- webgl2
| 方法 | 描述 |
|---|---|
| fill() | 填充路径 |
| stroke() | 描边 |
| arc() | 创建圆弧 |
| rect() | 创建矩形 |
| fillRect() | 绘制矩形路径区域 |
| strokenRect() | 绘制矩形路径描边 |
| clearRect() | 在给定的矩形内清除指定的像素 |
| arcTo() | 创建两切线之间的弧/曲线 |
| beginPath() | 起始一条路径，或重置当前路径 |
| moveTo() | 把路径移动到画布中的指定点，不创建线条 |
| lineTo() | 添加一个新点，然后在画布中创建从该点到最后指定点的线条 |
| closePath() | 创建从当前点回到起始点的路径 |
| clip() | 从原始画布剪切任意形状和尺寸的区域 |
| quadraticCurveTo() | 创建二次方贝塞尔曲线 |
| bezierCurveTo() | 创建三次方贝塞尔曲线 |
| isPointInPath() | 如果指定的点位于当前路径中，则返回 true，否则返回 false |
- 开始一个路径 beginPath()
- 绘制路径
- 关闭路径 closePath()
- 设置填充颜色或描边颜色
- 填充颜色或描边
context.arc(x, y, r, sAngle, eAngle, counterclockwise);
- x: 圆心的 x 坐标
- y：圆心的 y 坐标
- r：半径
- sAngle：起始角，以弧度计（弧的圆形的三点钟位置是 0 度）
- eAngle：结束角
- counterclockwise：可选，true 逆时针绘制；false 顺时针绘制
| 样式 | 描述 |
|---|---|
| lineCap | 设置或返回线条的结束端点样式 |
| lineJoin | 设置或返回两条线相交时，所创建的拐角类型 |
| lineWidth | 设置或返回当前的线条宽度 |
| miterLimit | 设置或返回最大衔接长度 |
-
fillRect(x, y, width, height)：绘制一个实心矩形
-
fillStyle
-
strokeRect(x, y, width, height)：绘制一个空心矩形
-
strokeStyle
| 属性 | 描述 |
|---|---|
| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
| shadowColor | 设置或返回用于阴影的颜色 |
| shadowBlur | 设置或返回用于阴影的模糊级别 |
| shadowOffsetX | 设置或返回阴影距形状的水平距离 |
| shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 创建线性渐变（用在画布内容上） |
| createPattern() | 在指定的方向上重复指定的元素 |
| createRadialGradient() | 创建放射状/环形的渐变（用在画布内容上） |
| addColorStop() | 规定渐变对象中的颜色和停止位置 |
- context.createLinearGradient(x0, y0, x1, y1)
- x0：开始渐变的 x 坐标
- y0：开始渐变的 y 坐标
- x1：结束渐变的 x 坐标
- y1：结束渐变的 y 坐标
| 方法 | 描述 |
|---|---|
| scale() | 缩放当前绘图至更大或更小 |
| rotate() | 旋转当前绘图 |
| translate() | 重新映射画布上的 (0,0) 位置 |
| transform() | 替换绘图的当前转换矩阵 |
| setTransform() | 将当前转换重置为单位矩阵，然后运行 transform() |
其实就是重绘的过程，当某种位置关系变化发生的足够快时，就产生了动画
清除：
context.clearRect(x, y, width, height);
- x: 要清除的矩形左上角的 x 坐标
- y: 要清除的矩形左上角的 y 坐标
- width：要清除的矩形的宽度，以像素计
- height：要清除的矩形的高度，以像素计
requestAnimationFrame() 函数
window.requestAnimationFrame()方法告诉浏览器，你希望执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用