标签: graphics

h7ml小于 1 分钟

h7ml小于 1 分钟

h7ml小于 1 分钟

h7ml小于 1 分钟

h7ml小于 1 分钟

前言

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

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
// 设置字体样式
context.font = '24px SimSun, Songti SC';
context.fillText('24px的宋体呈现', 20, 50);
// 绘制完整圆
context.fillStyle = 'RGB(255, 0, 0)';
context.beginPath();
context.arc(150, 75, 50, 0, Math.PI * 2);
context.stroke();

h7ml大约 17 分钟

openlayers

h7ml小于 1 分钟

svg

可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形。

网格

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

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

h7ml大约 16 分钟

three

h7ml小于 1 分钟

webgl

h7ml小于 1 分钟