canvas 系列（一）

canvas 是用 js绘制图形的html元素。起初是 Apple 引入webkit 供mac os 使用于 Dashboard的，后来各大浏览器都实现了。

基础

• 使用canvas需要要获得要绘制图形的上下文
• 默认大小 300 x 150

接下来我们用canvas画个矩形

• 首先定义canvas标签

  <canvas id="canvas" width></canvas>

• 然而什么也没发生，加个边框，看到一个宽300 高150的方框了吧

canvas{
  border: 1px solid black;
}

• 上面当然不是我们要画的矩形，下面才是

let canvas = document.getElementById("canvas") // 获取页面canvas对象
let ctx = canvas.getContext("2d") // 获取绘制图形的上下文，参数可以是2d、3d...

ctx.fillStyle = "rgb(0, 0, 0)" // 下面绘制图形的填充色
ctx.fillRect(10, 10 , 100, 100) // 从坐标（10，10）的地方画个宽100高100矩形

• 这就是你画的矩形，还挺像

image.png