baiduMap

h7ml
  • graphics
  • graphics
小于 1 分钟
canvas

h7ml
  • graphics
  • graphics
小于 1 分钟
erharts

h7ml
  • graphics
  • graphics
小于 1 分钟
fabric

h7ml
  • graphics
  • graphics
小于 1 分钟
konva

前言

用过 Canvas 的都知道它的 API 比较多,使用起来也很麻烦,比如我想绘制一个圆形就要调一堆 API,对开发算不上友好。

const canvas = document.querySelector('canvas')
const context = canvas.getContext('2d')
// 设置字体样式
context.font = '24px SimSun, Songti SC'

h7ml
  • graphics
  • graphics
大约 17 分钟
svg

可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用于描述二维的矢量图形。

网格

计算机绘图都差不多使用网格系统。这种系统以页面的左上角为(0,0)坐标点,坐标以像素为单位,x 轴正方向是向右,y 轴正方向是向下.

<!-- 定义一个矩形,即从左上角开始,向右延展50px,向下延展50px,形成一个50*50大的矩形。 -->
<svg width="50" height="50">

h7ml
  • graphics
  • graphics
大约 16 分钟
three

h7ml
  • graphics
  • graphics
小于 1 分钟
webgl

h7ml
  • graphics
  • graphics
小于 1 分钟