《(62)--Web2.9 Canvas画布Web设计与应用.ppt》由会员分享，可在线阅读，更多相关《(62)--Web2.9 Canvas画布Web设计与应用.ppt（12页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、WebWeb设计与应用设计与应用2.9 HTML5的Canvas画布Web设计与应用Canvas画布lCanvasCanvas画布画布提供可绘图的区域提供可绘图的区域标签定义了一个矩形的图形区域，比如图表和其他图像，但它只是图形容器，必须配合使用脚本语言来绘制图形。在HTML5中，canvas元素可以通过使用脚本，通常是JavaScript，在网页上绘制出各种绚丽多彩的图形。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas画布Canvas本身只有画布的高度和宽度属性，不过，它还支持 HTML 中的全局属性。l创建画布创建画布Canvas 使用JS画图画布创建
2、好之后，可以通过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的多种用法，可以绘制出更精美、更绚丽的网页效果。