博学谷 > 优质课 > Web前端开发Canvas绘制图形讲解

Canvas绘制图形

Web前端开发Canvas绘制图形讲解

canvas

主讲:前端高级讲师 | 课程时长:13课时 | 学习人数:177人 | 难度: 进阶

该课程已下架,请查看其它课程

第 一 章:Canvas绘制图形详解

1-1 Canvas介绍和快速入门

1-1-1 Canvas的整体介绍与课程说明
1-1-2 Canvas快速入门-Canvas绘图演示
1-1-3 Canvas快速入门-补充-获取不了WebGLRenderingContext的原因
1-1-4 Canvas快速入门-Canvas中的直角坐标系
1-1-5 Canvas快速入门-练习

1-2 Canvas绘制图形

1-2-1 练习-绘制虚线-01-水平虚线
1-2-2 练习-绘制虚线-02-倾斜虚线
1-2-3 练习-绘制正方形
1-2-4 练习-绘制多个形状

1-3 Canvas填充

1-3-1 填充-01-fill方法
1-3-2 填充-02-非零环绕原则
1-3-3 填充-03-非零环绕的练习

1-4 Canvas闭合路径和开启新路径

1-4-1 闭合路径-01-closePath方法
1-4-2 闭合路径-02-线宽的问题
1-4-3 闭合路径-03-closePath与lineTo闭合的异同
1-4-4 开启新路径-01-路径的概念-01
1-4-5 开启新路径-01-路径的概念-02

1-5 Canvas线性属性

1-5-1 线形属性-线帽与拐角
1-5-2 线形属性-虚线
1-5-3 线形属性-填充与描边的颜色

1-6 Canvas绘制坐标轴练习

1-6-1 练习-01-绘制坐标网格
1-6-2 练习-02-绘制坐标轴
1-6-3 练习-03-绘制坐标轴中的点

1-7 Canvas封装Line构造函数

1-7-1 封装Line构造函数-01
1-7-2 封装Line构造函数-02
1-7-3 小结01

1-8 复习01

1-8-1 复习01

1-9 Canvas绘制坐标点

1-9-1 绘制坐标点-01-绘制坐标轴
1-9-2 绘制坐标点-02-绘制坐标点问题
1-9-3 绘制坐标点-03-绘制思路说明
1-9-4 绘制坐标点-04-绘制点
1-9-5 绘制坐标点-05-连线-扩展

1-10 Canvas绘制矩形

1-10-1 绘制矩形-01-三个基本方法
1-10-2 绘制矩形-02-清除矩形区域
1-10-3 绘制矩形-03-简单的移动动画
1-10-4 绘制矩形-04-清除整个画布

1-11 Canvas绘制圆弧

1-11-1 绘制圆弧-01-arc方法的使用介绍
1-11-2 绘制圆弧-02-弧度与角度
1-11-3 绘制圆弧-03-0角的位置与计算
1-11-4 绘制圆弧-04-起始点与绘制圆弧的关系
1-11-5 绘制圆弧-05-计算圆弧上的点的坐标

1-12 Canvas绘制扇形和圆弧

1-12-1 绘制扇形-01-绘制简单扇形
1-12-2 绘制扇形-02-利用动画绘制圆
1-12-3 绘制扇形-03-绘制三等分饼形图
1-12-4 绘制扇形-04-根据数据绘制饼形图
1-12-5 绘制扇形-04-根据数据绘制饼形图-补充说明
1-12-6 绘制圆弧-其他

1-13 Canvas绘制文本

1-13-1 绘制文本-01-基本方法的使用
1-13-2 绘制文本-02-设置文本尺寸与字体
1-13-3 绘制文本-03-设置文本对齐属性

1-14 Canvas绘制饼形图案例

1-14-1 绘制动画-01-绘制单张图片
1-14-2 绘制动画-02-绘制动画
1-14-3 综合案例-绘制饼形图

1-15 复习02

1-15-1 复习02

1-16 Canvas绘制图片

1-16-1 绘制图片-01-指定绘制位置
1-16-2 绘制图片-02-指定绘制区域
1-16-3 绘制图片-03-将图片的某个区域绘制到指定区域

1-17 Canvas绘制动画和变换

1-17-1 绘制动画-01-绘制单张图片
1-17-2 绘制动画-02-绘制动画
1-17-3 变换-01-变换的基本概念
1-17-4 变换-02-利用坐标变换绘制椭圆
1-17-5 变换-03-绘制旋转矩形
1-17-6 变换-04-分析旋转变换效果

1-18 Canvas其它介绍

1-18-1 画布的状态保持
1-18-2 Canvas其他
1-18-3 Konva介绍
1-18-4 Konva的特点
1-18-5 使用Konva绘制矩形

1-19 Konva介绍和使用

1-19-1 Konva介绍
1-19-2 Konva的特点
1-19-3 使用Konva绘制矩形

1-20 查看文档绘制五角星

1-20-1 查看文档绘制五角星
1-20-2 文档与讲义

猜你还感兴趣

暂无推荐课程,自己逛逛吧

提示
该课程已在购物车中了,无需重复加入
去购物车