18、HTML5开发：从基础到实践

HTML5开发：从基础到实践

1. Canvas的回顾与展望

Canvas的示例虽由JavaScript函数控制，但实际较为静态，所绘制图形也可通过静态图像插入实现。其真正强大之处在于利用API创建动态图像，可用于游戏、动画或生成随内容更新的动态图表。此外，Canvas还有诸多未探讨的方面，如在画布上使用文本和图像、合成与裁剪绘图、添加图案和阴影以及动画等。若想深入研究，可访问 Canvas API 。

2. CSS3的过渡与变换

CSS3带来了过渡（Transitions）和变换（Transformations）两个有趣的新特性，虽严格来说不属于HTML5范畴，但却是人们讨论HTML5新特性时的热门话题。

2.1 过渡（Transitions）

过渡是指CSS属性改变时发生的隐式动画。以下是一个示例，展示了如何实现过渡效果：

.box {
    margin: 20px 20px;
    width: 200px;
    height: 100px;
    border: 1px dashed green;
    text-align: center;
}
.box:active {
    border: 8px solid red;
    font-size: xx-large;
    font-weight: bolder;
}
-webkit-transition: