HTML5_CANVAS练习案例
关注
分享
扫一扫
信封中的阳光
这个作者很懒，什么都没留下…
展开
-
7.1.2_抛射体弹道运动_小球投掷游戏
7.1.2_抛射体弹道运动_小球投掷游戏<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>抛射体弹道运动——小球投掷游戏</title> <style> output{ color:blue; }原创 2017-06-09 16:26:52 · 902 阅读 · 0 评论 -
5.7_背景的滚动
5.7_背景的滚动<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>背景的滚动</title> <style> body{ background: #ddd; } #can原创 2017-05-16 15:58:07 · 276 阅读 · 0 评论 -
5.7_背景的滚动_在画面静止时不执行animate版
5.7_背景的滚动_在画面静止时不执行animate版<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>背景的滚动_在画面静止时不执行animate版</title> <style> body{ background:原创 2017-05-16 15:58:53 · 387 阅读 · 0 评论 -
3.1_使用渐变色及图案来填充文本
3.1_使用渐变色及图案来填充文本<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使用渐变色及图案来填充文本</title> <style> body{ background: #eee; }原创 2017-05-08 10:50:03 · 468 阅读 · 0 评论 -
3.1_文本的描边与填充
3.1_文本的描边与填充<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>文本的描边与填充</title> <style> body{ background: #eee; }原创 2017-05-08 10:50:49 · 333 阅读 · 0 评论 -
3.3.1_水平与垂直定位
3.3.1_水平与垂直定位<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>水平与垂直定位</title> <style> body{ background: #eee; }原创 2017-05-08 10:51:33 · 481 阅读 · 0 评论 -
3.3.4_绘制坐标系旁边的文本标签
3.3.4_绘制坐标系旁边的文本标签<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>绘制坐标系旁边的文本标签</title> <style> body{ background: #eee; }原创 2017-05-08 10:52:21 · 246 阅读 · 0 评论 -
3.3.6_在圆弧周围绘制文本
3.3.6_在圆弧周围绘制文本<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>在圆弧周围绘制文本</title> <style> body{ background: #eee; }原创 2017-05-08 10:53:02 · 322 阅读 · 0 评论 -
3.4.1_指示文本输入位置的光标
3.4.1_指示文本输入位置的光标<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>指示文本输入位置的光标</title> <style> body{ background: #eee; }原创 2017-05-08 10:53:53 · 318 阅读 · 0 评论 -
5.10.2_动画计时器
5.10.2_动画计时器<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动画计时器</title> <style> body{ background: #fff; } #原创 2017-05-16 16:06:04 · 276 阅读 · 0 评论 -
5.10.1_秒表
5.10.1_秒表<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>秒表</title> <style> body{ background: #fff; } #canvas原创 2017-05-16 16:05:10 · 315 阅读 · 0 评论 -
4.11.2_在Canvas中播放视频
4.11.2_在Canvas中播放视频<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>在Canvas中播放视频</title> <style> body{ background: #eee; }原创 2017-05-12 14:07:29 · 1030 阅读 · 0 评论 -
4.11.3_视频处理
4.11.3_视频处理<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>视频处理</title> <style> body{ background: #ddd; } .fl原创 2017-05-12 14:08:21 · 253 阅读 · 0 评论 -
5.1_动画循环
5.1_动画循环<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动画循环</title> <style> body{ background: #ddd; } #canva原创 2017-05-16 15:53:49 · 328 阅读 · 0 评论 -
5.2_帧速率的计算
5.2_帧速率的计算<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>帧速率的计算</title> <style> body{ background: #ddd; } #c原创 2017-05-16 15:54:45 · 1020 阅读 · 0 评论 -
5.3_以不同帧速率来执行不同任务
5.3_以不同帧速率来执行不同任务<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>帧速率的计算</title> <style> body{ background: #ddd; }原创 2017-05-16 15:55:30 · 334 阅读 · 0 评论 -
5.4.1_利用剪辑区域来处理动画背景
5.4.1_利用剪辑区域来处理动画背景<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利用剪辑区域来处理动画背景</title> <style> body{ background: #ddd;原创 2017-05-16 15:56:17 · 267 阅读 · 0 评论 -
5.4.2_利用图块复制技术来处理动画背景
5.4.2_利用图块复制技术来处理动画背景<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利用图块复制技术来处理动画背景</title> <style> body{ background: #ddd;原创 2017-05-16 15:57:20 · 266 阅读 · 0 评论 -
5.8_视差动画
5.8_视差动画<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>视差动画</title> <style> body{ background: #ddd; } #canva原创 2017-05-16 16:04:13 · 640 阅读 · 1 评论 -
3.4.1.1_光标的擦除
3.4.1.1_光标的擦除<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>光标的擦除</title> <style> body{ background: #eee; } #can原创 2017-05-08 10:54:33 · 195 阅读 · 0 评论 -
3.4.1.2_光标的闪烁效果_清定时器版本
3.4.1.2_光标的闪烁效果_清定时器版本<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>光标的闪烁效果</title> <style> body{ background: #eee; }原创 2017-05-08 10:55:28 · 420 阅读 · 0 评论 -
8.4.1.4_多边形之间的碰撞
8.4.1.4_多边形之间的碰撞<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>多边形之间的碰撞</title> <style> body{ background: #fff; }原创 2017-06-29 17:05:43 · 575 阅读 · 1 评论 -
8.4.1.5_圆形与多边形之间的碰撞检测
8.4.1.5_圆形与多边形之间的碰撞检测<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>圆形与多边形之间的碰撞检测</title> <style> body{ background: #fff;原创 2017-06-29 17:06:47 · 2012 阅读 · 0 评论 -
8.4.1.6_图像与精灵的碰撞检测
8.4.1.6_图像与精灵的碰撞检测<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图像与精灵的碰撞检测</title> <!-- 这里的图像与精灵的碰撞检测我感觉有些不太精准，球是按四边形来存点的，感觉按圆形要更好 --> <style>原创 2017-06-29 17:08:12 · 667 阅读 · 0 评论 -
8.4.2.2_利用最小平移向量使两个物体粘在一起
8.4.2.2_利用最小平移向量使两个物体粘在一起<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利用最小平移向量使两个物体粘在一起</title> <style> body{ background: #fff;原创 2017-06-29 17:08:49 · 1336 阅读 · 0 评论 -
7.1.1_物体的下落
7.1.1_物体的下落<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>物体的下落</title> <style> body{ background: #fff; } #c原创 2017-06-09 16:25:47 · 575 阅读 · 1 评论 -
7.1.3_钟摆运动
7.1.3_钟摆运动<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>钟摆运动</title> <style> #canvas{ background: white; box-shadow原创 2017-06-09 16:28:09 · 1122 阅读 · 0 评论 -
7.3_时间轴扭曲函数
7.3_时间轴扭曲函数<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>时间轴扭曲函数</title> <style> body{ background: #fff; }原创 2017-06-09 16:28:59 · 982 阅读 · 0 评论 -
7.5_以扭曲后的帧速率播放动画
7.5_以扭曲后的帧速率播放动画<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>以扭曲后的帧速率播放动画</title> <style> body{ background: #cdcdcd; }原创 2017-06-09 16:30:12 · 441 阅读 · 0 评论 -
6.4_精灵动画制作器
6.4_精灵动画制作器<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>精灵动画制作器</title> <style> body{ background: #ddd; }原创 2017-05-27 13:49:31 · 652 阅读 · 1 评论 -
6.3.1_将多个行为组合起来_可暂停
6.3.1_将多个行为组合起来_可暂停<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background: #ddd; }原创 2017-05-27 13:42:33 · 276 阅读 · 0 评论 -
3.4.1.2_光标的闪烁效果
3.4.1.2_光标的闪烁效果<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>光标的闪烁效果</title> <style> body{ background: #eee; }原创 2017-05-08 10:56:29 · 917 阅读 · 0 评论 -
3.4.2_在canvas中编辑文本
3.4.2_在canvas中编辑文本<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>在canvas中编辑文本</title> <style> body{ background: #eee; }原创 2017-05-08 10:57:20 · 2769 阅读 · 0 评论 -
6.1_精灵概述
6.1_精灵概述<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>精灵概述</title> <style> body{ background: #ddd; } #canva原创 2017-05-27 13:04:01 · 271 阅读 · 0 评论 -
6.2.1_描边与填充绘制器
6.2.1_描边与填充绘制器<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>描边与填充绘制器-使用精灵</title> <style> body{ background: #ddd; }原创 2017-05-27 13:08:02 · 369 阅读 · 0 评论 -
6.2.2_图像绘制器
6.2.2_图像绘制器<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图像绘制器</title> <style> body{ background: #ddd; } #c原创 2017-05-27 13:11:35 · 343 阅读 · 0 评论 -
6.2.3_精灵表绘制器
6.2.3_精灵表绘制器<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>精灵表绘制器</title> <style> body{ background: #ddd; }原创 2017-05-27 13:37:22 · 697 阅读 · 0 评论 -
6.3_精灵对象的行为
6.3_精灵对象的行为<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>精灵对象的行为</title> <style> body{ background: #ddd; }原创 2017-05-27 13:38:15 · 483 阅读 · 0 评论 -
6.3.1_将多个行为组合起来
6.3.1_将多个行为组合起来<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background: #ddd; } #ca原创 2017-05-27 13:41:11 · 345 阅读 · 0 评论 -
4.10.1_用离屏来实现放大镜
4.10.1_用离屏来实现放大镜<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>用离屏来实现放大镜</title> <style> body{ background: #eee; }原创 2017-05-12 14:06:39 · 215 阅读 · 0 评论