canvas练习1-基础

canvas练习1-基础

• ​​资料查询​​
• ​​学习方法​​
• ​​动态创建一个DOM​​

• ​​掌握 document相关的函数​​
• ​​练习(1)​​

• ​​绘图资源​​

• ​​1. 画笔​​

• ​​练习(2)​​

• ​​2. 画刷​​

• ​​练习(3)​​

• ​​3. 鼠标移动事件​​
• ​​4. 鼠标点击事件​​
• ​​5. 鼠标双击事件​​
• ​​综合练习​​

资料查询

api函数文档查询地址：​​https://developer.mozilla.org/en-US/​​

学习方法

1. 掌握如何通过互联网找找资料，尽量细分问题，不要查询一个大的笼统的问题。
2. 编程没有什么标准答案，解决一个问题有N个方法，每种方法应该都会有一个最优的应用场景。在思考的时候要多想几个方法，比较每个方案的不同，和他们最优的应用场景。
3. 多练习，都些代码，多调试代码。
4. 经常重构自己以前的代码，通过看书等途径了解到新的方法或技术以后，可以使用在你以前的代码中，因为老的项目是有真实的场景，比凭空像场景要好。也有助于你在一些你已经解你的领域有新的突破。基本就动漫里面的融合技能。

动态创建一个DOM

掌握 document相关的函数

1. 查询某一个DOM
2. 修改DOM相关的属性
3. 创建一个新的DOM

练习(1)

在指定的一个div下创建一个canvas（画布)

canvas可以适应父节点div的大小

浏览器大小变动，父节点div和canvas可以自适应

给canvas画一个边框

绘图资源

CanvasRenderingContext2D

1. 画笔

掌握画笔粗细， 虚线实线，颜色等属性色设置

绘制线段， 矩形，扇形，三角型，圆

相关函数:strokeStyle, lineWidth, …

练习(2)

在canvas绘制线段， 矩形，扇形，三角型，圆

2. 画刷

掌握画刷颜色等属性设置，

绘制填充矩形，圆，三角型，扇形

相关函数: fillStyle, fillRect…

练习(3)

把习题（2）中的图形使用画笔填充

3. 鼠标移动事件

掌握如何截获鼠标移动事件及鼠标位置等相关信息

4. 鼠标点击事件

掌握如何截获鼠标点击事件及鼠标位置等相关信息

5. 鼠标双击事件

掌握如何截获 鼠标双击事件及鼠标位置等相关信息

综合练习

1. 在画布绘制上面的图形，
   四周边框
   切成4个矩形
   第1个是平行线，45度角
   第2个矩形， 四周间距都是10，
   第3个园，半径为外部矩形长的70%
   第4个等边三角形
2. 图形自适应，浏览器大小变化以后，图形也跟着变化
3. 鼠标移动到图形上， 多一个状态，可以在图形线段绘制几个小圆或小方块
4. 鼠标点击图形，如果是一个封闭的图形，填充颜色，再次点击取消填充颜色
5. 鼠标双击图形， 弹框，显示点击个哪个图形