图形的基本元素是路径。
路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
一个路径,甚至一个子路径,都是闭合的。
使用路径绘制图形需要一些额外的步骤:
1. 创建路径起始点
2. 调用绘制方法去绘制出路径
3. 把路径封闭
4. 一旦路径生成,通过描边或填充路径区域来渲染图形。
下面是需要用到的方法:
1. `beginPath()`
新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径
2. `moveTo(x, y)`
把画笔移动到指定的坐标`(x, y)`。相当于设置路径的起始点坐标。
3. `closePath()`
闭合路径之后,图形绘制命令又重新指向到上下文中
4. `stroke()`
通过线条来绘制图形轮廓
5. `fill()`
通过填充路径的内容区域生成实心的图形
- Canvas基本功能
- 绘制方法
- (一)Canvas标签
- 定义Canvas标签
- 理解Canvas坐标系
- 获取Canvas环境上下文
- (二)Canvas图形
- 绘制Canvas路径
- 1、绘制线条
- 案例1:绘制直线
- 案例2:绘制圆形的结束线帽
- 案例3:绘制复杂圆形
- 2、绘制矩形
- 案例1:rect()与stroke()绘制矩形
- 案例2:fillRect()绘制矩形
- 3、绘制圆形
- 案例1
- 案例2
- 4、绘制贝塞尔曲线
- 案例1:贝塞尔曲线方式1
- 案例2:贝塞尔曲线方式2
- 案例3:复杂的贝塞尔曲线
- 绘制Canvas变形图形
- 处理Canvas图形
- (三)Canvas文本
- 绘制文字
- 设置文字格式
- 设置文字对齐方式
- (四)Canvas图片
- 绘制drawImage图片
- 使用getImageData()和putImageData()绘制图片
- 使用createImageData新建像素
- 参考文章
- API官网
- 示例