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

开发任务放大镜效果熟悉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元素属性绘制基本图形绘制图形需要一些步骤：创建路径起始点

调用绘制方法去绘制出路径

把路径封闭

通过描边或填充路径区域来渲染图形

绘制直线获取canvas对象varcanvas=document.getElementById("canvas");创建二维的绘图上下文对象varcontext=canvas.getContext("2d");绘制直线通过moveTo()方法设置起点context.moveTo(0,0);通过lineTo()确定直线的终点context.lineTo(990,0);绘制直线通过strokeStyle()方法设置线条颜色context.strokeStyle="aqua";通过lineWidth()设置线条宽度context.lineWidth=30;绘制直线通过stroke()方法显示线条轮廓色context.stroke();运行效果图如下：绘制图像绘制图像第一种参数形式ctx.drawImage(image,x,y);参数image:规定要使用的图像，画布或者视频x:在画布上放置图像的x轴坐标位置y：在画布上方式图像的y轴坐标位置绘制图像第一种参数形式varctx=document.getElementById('draw').getContext('2d');varimg=newImage();img.src='./1.jpg';img.onload=function(){//图像加载完成，绘制画布中

ctx.drawImage(img,50,50);}绘制图像第二种参数形式ctx.drawImage(image,x,y,w,h)参数image:规定要使用的图像，画布或者视频x:在画布上放置图像的x轴坐标位置y：在画布上方式图像的y轴坐标位置w：使用图像的宽度h:使用图像的高度绘制图像第二种参数形式img.onload=function(){ctx.drawImage(img,50,50,100,100);}绘制图像第三种参数形式ctx.drawImage(image,sourceX,sourceY,sourceW,sourceH,x,y,w,h)参数image:规定要使用的图像，画布或者视频sourceX：源图像上的裁切x坐标位置sourceY：源图像上的裁切Y坐标位sourceW：源图像上的裁切的宽度sourceH：源图像上的裁切高度绘制图像第三种参数形式ctx.drawImage(image,sourceX,sourceY,sourceW,sourceH,x,y,w,h)参数x:在画布上放置图像的x轴坐标位置y：在