<HeadFirst_HTML5> O'REILLY_Chap.7_画布

关注

原创最新推荐文章于 2026-11-07 16:47:27 发布 414 阅读 AI 写同款· GEO 优化 ›

DFT与机器学习协同设计高效光催化剂：从电子结构到性能预测密度泛函理论（DFT）作为计算材料学的基石，通过求解Kohn-Sham方程，能够在原子尺度精确预测材料的电子结构、能带和光学性质，为理解光催化等能源材料的微观机理提供了关键视角。其核心价值在于替代传统试错法，实现材料性能的理性设计与机理揭示。在工程实践中，面对高通量筛选的需求，机器学习（ML）技术，特别是长短期记忆网络（LSTM）这类擅长处理序列数据的模型，能够学习从材料描述符到复杂性能（如光谱）的映射关系，实现快速性能预测与优化。这种DFT与ML的结合范式，正广泛应用于新能源材料、半导体器件等领域，用于高阅读详情

<HeadFirst_HTML5> O’REILLY_Chap.7_画布

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_HTML5>作者 Eric Freeman & Elisabeth Robson
感谢<HeadFirst_HTML5>翻译林琪张伶

正文

原文

BULLTE POINTS(要点):

画布是一个元素, 可以放在页面上来创建一个绘制空间.
除非你指定, 否则画布没有默认的样式或内容(所以在画布上绘制内容或用CSS增加边框之前, 在页面上是看不见画布的).
页面上可以有多个画布. 当然, 需要为每个画布提供一个唯一的id, 以便使用JavaScript分别访问.
要指定画布元素的大小, 可以使用元素的 width 和 height 属性.
画布上的所有内容都使用JavaScript绘制.
要在画布上绘制, 首选需要创建一个上下文. 目前, 2D上下文是唯一的选择, 不过将来可能还会有其他上下文类型.
要在画布上绘制, 需要有一个上下文, 因为上下文提供了一个特定的接口(例如:2D或3D). 你可以从多种接口中选择来完成画布上的绘制
使用上下文属性和方法来访问画布.
要在画布中绘制一个矩形, 可以使用 context.fillRect 方法, 这个方法会创建一个矩形, 并填充指定的颜色.
要创建一个矩形轮廓, 可以使用 strokeRect 而不是 fillRect.
使用 fillStyle 和 stokeStyle 可以改变默认的填充和笔划颜色, 默认是黑色.
可以使用CSS中同样的格式指定颜色(例如: “black”, “#000000”, “rgb(0, 0, 0)” ), 记住要在 fillStyle 值两边加上引号.
并没有一个 fillCircle 方法. 要在画布上绘制一个圆, 需要绘制一个弧.
要创建任意的形状或弧, 首先需要创建一个路径.
路径是一个不可见的线或形状, 它定义了画布上的一条线或区域. 用笔划描出路径或填充路径之前, 路径是看不到.
要创建一个三角形, 可以使用 beginPath 创建一个路径. 然后使用 moveTo 和 lineTo 来绘制路径. 使用 closePath 可以连接路径上的两个点.
要绘制一个圆, 可以创建一个360°的弧. 起始角为0, 终止角为360°.
画布中使用弧度来指定角, 而不是使用度, 所以需要从度转化为弧度来指定起始角和终止角.
360度 = 2Pi 弧度.
要在画布上绘制文本, 可以使用 fillText 方法.
在画布中绘制文本时, 需要使用上下文属性指定位置, 样式和其他属性
设置一个上下文属性时, 它会应用到后面的所有绘制操作, 直到你再次改变这个属性. 例如, 改变 fillStyle 会影响设置 fillStyle 之后绘制的所有形状和文本的颜色.
可以用 drawImage 方法向画布增加图像.
要增加一个图像, 首先需要创建一个图像对象, 并确保它完全加载.
在画布上绘制就像在图形程序中完成”位图”绘制.