第7讲 Canvas?游戏 信息学院孙辉
第7讲 信息学院 孙辉 Canvas游戏
内容 ■Canvas基础 Canvas基本动画
内容 ▪Canvas基础 ▪Canvas基本动画
Canvas基础 ·canvas元素是HTML5中新增的一个重要元素， 专门用来绘制图形。 ·在页面上放置一个canvas元素就相当于在页 面上放置了一块“画布”，它是一个矩形区 域，您可以控制其每一像素。可以在其中进 行图形的描绘。 canvas拥有多种绘制路径、矩形、圆形、字 符以及添加图像的方法。 canvas元素本身是没有绘图能力的。所有的 绘制工作必须在JavaScript内部完成
Canvas基础 • canvas元素是HTML5中新增的一个重要元素， 专门用来绘制图形。 • 在页面上放置一个canvas元素就相当于在页 面上放置了一块“画布”，它是一个矩形区 域，您可以控制其每一像素。可以在其中进 行图形的描绘。 • canvas 拥有多种绘制路径、矩形、圆形、字 符以及添加图像的方法。 • canvas 元素本身是没有绘图能力的。所有的 绘制工作必须在 JavaScript 内部完成
Canvas元素的基础知识 ·<canvas>:看起来很像<img>,唯一不同就是它不 含src和alt属性。 它只有两个属性，width和height,两个都是可 选的，并且都可以DOM或者CSS来设置。 ·如果不指定width和height,默认的是宽3oo像 素，高150像素。 ·虽然可以通过CSS来调整canvas的大小，但渲 染图像会缩放来适应布局的。 结束标签<canvas>是必须的
Canvas元素的基础知识 • <canvas>看起来很像<img>，唯一不同就是它不 含 src 和 alt 属性。 • 它只有两个属性，width 和 height，两个都是可 选的，并且都可以 DOM 或者 CSS 来设置。 • 如果不指定width 和 height，默认的是宽300像 素，高150像素。 • 虽然可以通过 CSS 来调整canvas的大小，但渲 染图像会缩放来适应布局的 。 • 结束标签 </canvas> 是必须的
放置Canvas <style type="text/css"> .canvas{width:15opx;height:15opx; </style> <body onload="draw();"> <div class="canvas"> <canvas id="canvas"width="150"height="150"> <p>写在这里面的内容将展示给不兼容canvas的浏览器 <p> </canvas> </div> </body> 演示
放置Canvas <style type="text/css"> .canvas { width:150px; height:150px;} </style> <body onload="draw();"> <div class="canvas"> <canvas id="canvas" width="150" height="150"> <p>写在这里面的内容将展示给不兼容canvas的浏览器 </p> </canvas> </div> </body> 演示