H5学习----Canvas(一)

1.如何使用canvas

• 想要使用Canvas,首先需要在网页创建一块画布， <canvas id="tt" width="400" height="400"></canvas>，将代码添加到body内，就生成了一块400X400的画布了。当然我们也需要给我们的画布取个好听的名字，方便我们接下来在代码中找到它并在它上面进行绘画。
• 通过id索引到canvas画布，再通过画布获得图形上下文，上下文内封装许多的绘图功能对象，后续我将会列出一部分比较常用简单的绘制对象。getContext()只能设置参数2d，并不能如我们想的那样，设置成3d或4d。

const canvas = document.getElementById('tt')
const context = canvas.getContext('2d')

• 绘制图形有两种方式：填充图形内部(fill)和单纯绘制边框(stroke)。
• 设置绘图样式(style)：在进行所有的图形绘制之前我们都需要进行样式的设定。跟上面的绘制图形的方式一样，我们可以通过fillStyle和strokeStyle进行样式设定。
• 对于填充的颜色支持16进制、rgba、red/blue等方式进行设定。

2.相关api

• 绘制一个最简单矩形, 有四个参数，其中x,y分别是矩形起点横纵坐标，width和height分别是宽高。：

context.fillRect(x, y, width, height)
context.strokeRect(x, y, width, height)

• clearRect(x, y, width, height) 可以指定擦除区域内的矩形，使该区域内的颜色变为透明。