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
网友评论