网站建设管理系统河北网站建设公司,河北网站设计公司,河北网站制作公司,河北网站建设,河北网站设计,河北网站制作

通过JavaScript绘制图形 <canvas>兀素只是图形容器,其本身是没有绘图能力的,所有的绘制工作必须在JavaScripti内部完成。 在画布上绘图的核心是上下文对象CanvasRenderingContext2D,用户可以在JavaScript代码中使用getContext()方法渲染上下文进而在画布上显示形状和文本。 JavaScript使用getElementById方法通过canvas的id定位canvas元素,例如以下代码: var myCanvas= document.getElementById(’myCanvas’); 然后,创建context对象,例如以下代码: var myContext= myCanvas.getContext("2d"); getContext()方法使用一个上下文作为其参数,一旦渲染上下文可用,程序就可以调用各种绘图方法。表5-7列出了渲染上下文对象的常用方法。表5-7渲染上下文对象的常用方法

方法 描述 fdlRect() 绘制‘个填充的矩形 strokeRect() 绘制一个矩形轮廓 clearRect() 清除画布的矩形区域 lineTo() 绘制一条直线 arc0 绘制圆弧或圆 moveTo() 当前绘图点移动到指定位置 beginPath() 开始绘制路径 closePath() 标记路径绘制操作结束 stroke() 绘制当前路径的边框 fiUO 填充路径的内部区域 fiIIText() 在画布上绘制一个字符串 createLinearGradient() 创建一条线性颜色渐变 drawImage() 把一幅图像放置到画布上

需要说明的是,canvas画布的左上角为坐标原点(0,0)。1.绘制矩形(1)绘制填充的矩形fillRect()方法用来绘制填充的矩形,语法格式为: