加强网站建设南宁网站建设公司,南宁网站设计公司,南宁网站制作公司,南宁网站建设,南宁网站设计,南宁网站制作

5.4 canvas绘图 HTML5的<canvaS>JL素有一个基于JavaScript的绘图API,在页面上放置-个<canvas>元素就相当于在页面上放置了一块"画布",可以在其中进行图形的描绘。<canvas>兀素拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,设计者可以控制其每个像素。5.4.1创建<canvas>兀系 <canvas>7L素的主要属性包括画布宽度属性width和高度属性height,单位是像素。向页面中添加<canvas>元素的语法格式为: <canvas id="画布标识"width="画布宽度"height="画布高度"> </canvas> <canvas>元素看起来很像<1mg>标签,唯一不同就是它不含src和alt属性。如果不指定width和height属性值,默认的画布大小是宽300像素,高150像素。 例如,创建一个标识为myCanvas,宽度为200像素,高度为100像素的<canvas>元素,代码如下: <canvas id=’’myCanvas"width="200"height="100"></canvas>5.4.2构建绘图环境 大多数<canvas>绘图API都没有定义在<canvas>元素本身上,而是定义在通过画布隐getContext()方法获得的一个"绘图环境"对象上。getContext()方法返回一个用于在画布上绘图的环境,其语法如下: canvas.getContext(contextID) 其中,参数contextID指定了用户想要在画布上绘制的类型。2D即二维绘图,这个方法返回一个上下文对象CanvasRenderingContext2D,该对象导出一个二维绘图API。