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

课程详情

课程目录

第一章 Canvas绘制图形详解
  Canvas介绍和快速入门
    Canvas的整体介绍与课程说明
    Canvas快速入门-Canvas绘图演示
    Canvas快速入门-补充-获取不了WebGLRenderingContext的原因
    Canvas快速入门-Canvas中的直角坐标系
    Canvas快速入门-练习
  Canvas绘制图形
    练习-绘制虚线-01-水平虚线
    练习-绘制虚线-02-倾斜虚线
    练习-绘制正方形
    练习-绘制多个形状
  Canvas填充
    填充-01-fill方法
    填充-02-非零环绕原则
    填充-03-非零环绕的练习
  Canvas闭合路径和开启新路径
    闭合路径-01-closePath方法
    闭合路径-02-线宽的问题
    闭合路径-03-closePath与lineTo闭合的异同
    开启新路径-01-路径的概念-01
    开启新路径-01-路径的概念-02
  Canvas线性属性
    线形属性-线帽与拐角
    线形属性-虚线
    线形属性-填充与描边的颜色
  Canvas绘制坐标轴练习
    练习-01-绘制坐标网格
    练习-02-绘制坐标轴
    练习-03-绘制坐标轴中的点
  Canvas封装Line构造函数
    封装Line构造函数-01
    封装Line构造函数-02
    小结01
  复习01
    复习01
  Canvas绘制坐标点
    绘制坐标点-01-绘制坐标轴
    绘制坐标点-02-绘制坐标点问题
    绘制坐标点-03-绘制思路说明
    绘制坐标点-04-绘制点
    绘制坐标点-05-连线-扩展
  Canvas绘制矩形
    绘制矩形-01-三个基本方法
    绘制矩形-02-清除矩形区域
    绘制矩形-03-简单的移动动画
    绘制矩形-04-清除整个画布
  Canvas绘制圆弧
    绘制圆弧-01-arc方法的使用介绍
    绘制圆弧-02-弧度与角度
    绘制圆弧-03-0角的位置与计算
    绘制圆弧-04-起始点与绘制圆弧的关系
    绘制圆弧-05-计算圆弧上的点的坐标
  Canvas绘制扇形和圆弧
    绘制扇形-01-绘制简单扇形
    绘制扇形-02-利用动画绘制圆
    绘制扇形-03-绘制三等分饼形图
    绘制扇形-04-根据数据绘制饼形图
    绘制扇形-04-根据数据绘制饼形图-补充说明
    绘制圆弧-其他
  Canvas绘制文本
    绘制文本-01-基本方法的使用
    绘制文本-02-设置文本尺寸与字体
    绘制文本-03-设置文本对齐属性
  Canvas绘制饼形图案例
    绘制动画-01-绘制单张图片
    绘制动画-02-绘制动画
    综合案例-绘制饼形图
  复习02
    复习02
  Canvas绘制图片
    绘制图片-01-指定绘制位置
    绘制图片-02-指定绘制区域
    绘制图片-03-将图片的某个区域绘制到指定区域
  Canvas绘制动画和变换
    绘制动画-01-绘制单张图片
    绘制动画-02-绘制动画
    变换-01-变换的基本概念
    变换-02-利用坐标变换绘制椭圆
    变换-03-绘制旋转矩形
    变换-04-分析旋转变换效果
  Canvas其它介绍
    画布的状态保持
    Canvas其他
    Konva介绍
    Konva的特点
    使用Konva绘制矩形
  Konva介绍和使用
    Konva介绍
    Konva的特点
    使用Konva绘制矩形
  查看文档绘制五角星
    查看文档绘制五角星
    文档与讲义