C#229课的主要内容

今天主要讲了以下知识点：

       html5Canvas

canvas元素用于在网页上绘制图形

什么是Canvas?

HTML5的canvas元素使用JavaScript在网页上绘制图像。

画布是一个巨型区域，你可以控制其每一像素

canvas拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。

创建Canvas元素

向HTML5页面添加canvas元素

规定元素的id,宽度和高度：

通过JavaScript来绘制

canvas元素本身是没有绘图能力的，所有的绘制工作必须在Javascript内部完成：

拥有多种绘制路径，矩形，圆形字符以及添加图形、像法人方法

理解坐标

更多Canvas实例

实例-线条

通过制定从何处开始，在何处结束，来绘制一条线：

实例-圆形

通过规定尺寸，颜色和位置，来绘制一个圆：

实例-渐变

使用你指定的颜色来绘制渐变背景：

实例-图像

把一副图像放置到画布上：

HTML5内联SVG

html5支持内联SVG

什么是SVG?

SVG指可伸缩矢量图形

SVG用于定义用于网络的基于矢量的图形

SVG使用XML格式定义图形

SVG图像在方大或改变尺寸的情况下其图形质量不会有损失

SVG是万维网联盟的标准

SVG的优势

与其它图像格式相比，使用SVG的优势在于：

SVG图像可通过文本编译器来创建和修改

SVG图像可被搜索，索引，脚本化或压缩

SVG 是可伸缩的

SVG图像可在任何的分变率下被高质量第打印

SVG可在图像质量不下降的情况下被放大

浏览器支持

把SVG直接嵌入HTML页面

在html5中，你能够将SVG元素直接嵌入HTML页面中：

实例