前端语言串讲（HTML5中怎样清除canvas） ｜ 青训营

知识点一

HLMT构建骨架 第一次写HLMT

     你好呀

基本语法

1.标签(元素)Element ..
2.Text 文本 text
3.注释 Comment
4.DTD Document Type Defination
5.处理信息ProcessingInstruction

知识点二

CSS给予骨骼构建皮囊

h1 {color:blue;fontsize:12px;}

知识点三

Javascript构建肌肉（交互体验）

eg： ES5 ES6

Seven (7) Types

1. String "Any text"
2. Number 123.45
   3.Boolean true or false
3. Null null
   5.Undefined undefined
4. Symbol Symbol('something')
5. Object { key:'value'}
   -Array [1,"text", false]
   -Function function name(){}

过程：HTTP→构建DOM树→计算cSS树→排版→渲染合成→绘制

知识点四

HTML5 前端中清除 canvas，可以使用 canvas 上下文的 clearRect() 方法。该方法清除指定的矩形区域，使其完全透明。

以下是如何使用clearRect()清除整个画布的示例：

在此示例中，我们首先使用 getElementById() 获取对 canvas 元素的引用。然后，我们使用 getContext('2d') 获取 canvas 上下文。最后，我们在上下文上调用 clearRect()，传递要清除的矩形区域的坐标(在本例中为整个画布)。

但是，调用clearRect()不会重置画布状态，因此在清除操作后，任何应用于上下文的转换或样式仍将生效。如果要完全重置画布状态，可以在清除画布之前调用ctx.save()，在之后调用ctx.restore()：

这将保存当前画布状态，清除画布，然后恢复保存的状态，有效地将画布重置为其默认状态。