《HTML5+CSS3响应式Web开发》课件——2.canvas元素简介.pptxVIP

开发任务放大镜效果

熟悉canvas元素简介掌握绘图基本步骤掌握绘制基本图形掌握绘制图像

canvas元素简介

canvas标签Canvas标签本身不能绘制图形，需要与JavaScript脚本相结合，才能在网页中绘制图形。渲染上下文(ThreRendingContext)canvas会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。

绘图基本步骤

坐标空间栅格的起点为左上角，坐标为(0,0)。所有元素的位置都相对于原点来定位。左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素。

绘制矩形为例获取canvas对象创建二维的绘图上下文对象在canvas绘制填充矩形

绘制基本图形

方法描述fill()通过填充路径的内容区域生成实心的图形stroke()通过线条来绘制图形轮廓beginPath()新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径moveTo(x,y)把画笔移动到指定的坐标(x,y)，相当于设置路径的起始点坐标。closePath()闭合路径之后，图形绘制命令又重新指向到上下文中lineTo(x,y)添加一个新点(x,y),然后创建从该点到最后指定点的线条路径绘制基本图形canvas元素属性

绘制基本图形绘制图形需要一些步骤：创建路径起始点调用绘制方法去绘制出路径把路径