/canvas_setting.github.io

使用Canvas通过配置项绘制不同属性的图形

Primary LanguageJavaScript

Canvas实验室

效果图如下: 1.png

用canvas实现一些功能,可以通过配置项进行操作,分为通用类、文本类和图片类如:

通用类:

  • 线宽
  • 阴影模糊半径
  • 阴影X轴偏移量
  • 阴影Y轴偏移量
  • 缩放
  • 旋转
  • 不透明度
  • 阴影颜色
  • 填充颜色
  • 边框颜色
  • 线的类型

文本类:

  • 文本内容
  • 字体大小
  • 对齐方式
  • 基线对齐
  • 文本方向

图片类:

  • 图片地址
  • 切片X
  • 切片Y
  • 原点坐标X
  • 原点坐标Y

实现的功能有:

  • 绘制矩形
  • 绘制三角形
  • 绘制直线
  • 绘制圆形
  • 绘制文本
  • 绘制二次贝塞尔曲线
  • 绘制三次贝塞尔曲线
  • 绘制图片
  • 绘制哆啦A梦