Web2.9 Canvas画布.pptx

《Web2.9 Canvas画布.pptx》由会员分享，可在线阅读，更多相关《Web2.9 Canvas画布.pptx（13页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、课程主讲人：Web2.9 Canvas画布昆明理工大学计算中心昆明理工大学计算中心WebWeb设计与应用设计与应用2.9 HTML5的Canvas画布Web设计与应用Canvas画布l CanvasCanvas画布画布提供可绘图的区域提供可绘图的区域标签定义了一个矩形的图形区域，比如图表和其他图像，但它只是图形容器，必须配合使用脚本语言来绘制图形。在HTML5中，canvas元素可以通过使用脚本，通常是JavaScript，在网页上绘制出各种绚丽多彩的图形。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas画布Canvas本身只有画布的高度和宽度属性，不过，它

2、还支持 HTML 中的全局属性。l 创建画布创建画布Canvas 使用JS画图画布创建好之后，可以通过JavaScript来画图：1、在JavaScript中使用 id 来寻找 canvas 元素；2、创建getContext(“2d”) 实例， getContext(“2d”)是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法；3、使用getContext(“2d”) 实例画出各种图像。l 使用说明使用说明使用Canvas画矩形框l 示例代码示例代码l 实现效果实现效果使用Canvas画折线l 示例代码示例代码l 实现效果实现效果使用Canvas画圆形l 示例代码示例代码l 实现效果实现效果使用Canvas实现颜色渐变l 示例代码示例代码l 实现效果实现效果使用Canvas添加现有图片l 示例代码示例代码l 实现效果实现效果总结canvas画布在网页中提供了一个可以编制JS程序来实现画图功能的区域。结合上述的JS的多种用法，可以绘制出更精美、更绚丽的网页效果。