HTML5 - 随笔分类 - xiaoxustudy

【HTML5 绘图与动画】使用图像 1.导入图像 2.缩放图像 3.裁切图像

摘要：以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。目录： 1.导入图像 2.缩放图像 3.裁切图像 1.导入图像导入图片的步骤：第 1 步：确定图像来源第 2 步：使用 drawImage() 方法将图像绘制到 canvas 中确定图片来源有4种方法: Ⅰ 阅读全文

posted @ 2020-01-22 23:51 xiaoxustudy 阅读(328) 评论(0) 推荐(0)

【HTML5 绘图与动画】绘制文本 1. 填充文字 fillText( ) 2. 轮廓文字 strokeText( ) 3. 文本样式 textAlign、textBaseline 4. 测量宽度 measureText( )

摘要：以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。目录： 1. 填充文字 2. 轮廓文字 3. 文本样式 4. 测量宽度 1. 填充文字用法： context.fillText( 在画布上输出的文本，开始绘制文本的x坐标位置，开始绘制文本的y坐标位置，允许的阅读全文

posted @ 2020-01-22 22:35 xiaoxustudy 阅读(1072) 评论(0) 推荐(0)

【HTML5 绘图与动画】图形合成 1. 合成 globalCompositeOperation 2.裁切 clip

摘要：以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。目录： 1. 合成 2.裁切 1.合成 ① globalCompositeOperation 的属性值不同，图形的绘制顺序也不同。语句： 1 <canvas id="canvas" width="200" hei 阅读全文

posted @ 2020-01-21 23:54 xiaoxustudy 阅读(280) 评论(0) 推荐(0)

【HTML5绘画与动画】图形变形 1.保存和恢复状态 2. 清除画布 3. 移动坐标 4. 旋转坐标 5. 缩放图形 6.变换图形

摘要：以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。目录： 1.保存和恢复状态 2. 清除画布 3. 移动坐标 4. 旋转坐标 5. 缩放图形 6.变换图形 1.保存和恢复状态 ① 绘制一个矩形，填充颜色为 #ff00ff, 轮廓颜色为蓝色，然后保存这个状态，再绘制阅读全文

posted @ 2020-01-21 21:10 xiaoxustudy 阅读(379) 评论(0) 推荐(0)

【HTML5绘画与动画】定义样式和颜色 1. 颜色 2. 不透明度 3. 实线 4. 虚线 5. 线性渐变 6. 径向渐变 7. 图案 8. 阴影 9. 填充规则

摘要：以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。目录： 1. 颜色 2. 不透明度 3. 实线 4. 虚线 5. 线性渐变 6. 径向渐变 7. 图案 8. 阴影 9. 填充规则 1. 颜色 ① 使用嵌套 for 循环绘制方格阵列，每个方格填充不同色。通过渐变的阅读全文

posted @ 2020-01-19 20:16 xiaoxustudy 阅读(456) 评论(0) 推荐(0)

【HTML5 绘图与动画】绘制图形 1. 矩形 2. 路径 3. 直线 4. 圆弧 5. 二次方曲线 6. 三次方曲线

摘要：以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。目录： 1. 矩形 2. 路径 3. 直线 4. 圆弧 5. 二次方曲线 6. 三次方曲线 1. 矩形 ① 绘制 3 个嵌套的矩形语句： 1 <canvas id="canvas" width="300" hei 阅读全文

posted @ 2020-01-17 21:47 xiaoxustudy 阅读(484) 评论(0) 推荐(0)

【HTML5 绘图与动画】使用canvas

摘要：以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。使用 < canvas > 标签在网页中创建一块画布 canvas 标签属性如下： id: 用来标识画布 width: 设置canvas 的宽度 height: 设置 canvas 的高度默认情况为宽300像素、阅读全文

posted @ 2020-01-17 17:38 xiaoxustudy 阅读(297) 评论(0) 推荐(0)

【H5新增元素和文档结构】新的全局属性 1. contentEditable 可编辑内容 2. contextmenu 快捷菜单 3. data 自定义属性 4. draggable 可拖动 5. dropzone 拖动数据 6. hidden 隐藏 7. spellcheck 语法检查 8. translate 可翻译

摘要：以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。目录： 1. contentEditable 可编辑内容 2. contextmenu 快捷菜单 3. data 自定义属性 4. draggable 可拖动 5. dropzone 拖动数据 6. hidden 阅读全文

posted @ 2020-01-17 16:44 xiaoxustudy 阅读(410) 评论(0) 推荐(0)

【H5新增元素和文档结构】完善旧元素 1. a 超链接 2. ol 有序列表 3. dl 定义列表 4. cite 引用文本 5. small 小号字体 6. iframe 浮动框架 7. script 脚本

摘要：以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。目录： 1. a 超链接 2. ol 有序列表 3. dl 定义列表 4. cite 引用文本 5. small 小号字体 6. iframe 浮动框架 7. script 脚本 1. a 超链接新增 3 个属性阅读全文

posted @ 2020-01-17 15:27 xiaoxustudy 阅读(242) 评论(0) 推荐(0)

【H5新增元素和文档结构】新的语义信息 1. address 2. time 3. figure 跟 figcaption 4. details 和 summary 5. mark 6. progress 7. meter 8. dialog 9.bdi 10. wbr 11. ruby、rt、rp 12. command

摘要：以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。目录： 1. address 联系信息 2. time 显示时间 3. figure 跟 figcaption 流媒体 4. details 和 summary 详细内容 5. mark 记号文本 6. progr 阅读全文

posted @ 2020-01-17 02:11 xiaoxustudy 阅读(416) 评论(0) 推荐(0)

【H5新增元素跟文档结构】新的文档结构 1. article 文章块 2. section 区块 3. nav 导航条 4. aside 辅助栏 5. main 主要区域 6. header 标题栏 7. hgroup 标题组 8. footer 页脚栏

摘要：以下内容为学习下图这本书做的笔记，非原创。做的笔记主要是为了实践一下看看结果加深记忆。目录: 1. article 文章块 2. section 区块 3. nav 导航条 4. aside 辅助栏 5. main 主要区域 6. header 标题栏 7. hgroup 标题组 8. foote 阅读全文

posted @ 2020-01-16 17:49 xiaoxustudy 阅读(1133) 评论(0) 推荐(0)

随笔分类 - HTML5