HTML5+CSS3网页设计基础教程第5章 图形图像绘制

HTML5+CSS3网页设计基础教程第5章图形图像绘制第1页第5章图形图像绘制本章概述本章的学习目标主要内容HTML5+CSS3网页设计基础教程第5章图形图像绘制第2页本章概述canvas是HTML5的一个新增元素。通过canvas元素，用户可以在Web中绘制各种图形。虽然以前也有基于XML的绘图技术，如VML何SVG等，但canvas是基于像素的绘制，开发者通过Javascript脚本可以轻松绘图。绘制图形时，在页面上放置一个canvas元素，就相当于在页面上放置了一块画布，可以在这块画布中进行绘制图形，但是并不是用鼠标进行画图，实际上，canvas只是一块无色透明的区域，只是一个javascriptAPI，需要通过javascript编写绘制图形的脚本。本章就来介绍canvas元素的使用。HTML5+CSS3网页设计基础教程第5章图形图像绘制第3页本章的学习目标理解与canvas元素相关的基础知识使用canvas元素绘制简单图形使用canvas元素绘制贝塞尔曲线使用canvas元素绘制变形图形使用canvas元素添加丰富图形效果使用canvas元素对图像进行处理使用canvas元素对图形图像进行组合和混合操作使用canvas元素将文字绘制到Web上使用canvas绘图时状态的保存与恢复HTML5+CSS3网页设计基础教程第5章图形图像绘制第4页主要内容5.1canvas元素基础5.2绘制简单图形5.3绘制贝塞尔曲线5.4绘制变形图形5.5丰富图形效果5.6图像处理5.7绘制文字5.8本章小结HTML5+CSS3网页设计基础教程第5章图形图像绘制第5页5.1canvas元素基础5.1.1添加canvas元素5.1.2检测浏览器支持5.1.3使用Canvas绘制图形5.1.4Canvas坐标系HTML5+CSS3网页设计基础教程第5章图形图像绘制第6页5.1.1添加canvas元素在HTML页面中添加canvas元素的方法和其他元素的添加一样，代码如下：canvasid=canvas1width=400height=300/canvasHTML5+CSS3网页设计基础教程第5章图形图像绘制第7页5.1.2检测浏览器支持并不是所有的浏览器都支持canvas元素，因此，在使用时需要先进行检测。检测的方法有两种：一种是为不支持canvas元素的浏览器提供替代显示的内容；另一种是使用JavaScript代码进行检测。HTML5+CSS3网页设计基础教程第5章图形图像绘制第8页5.1.3使用Canvas绘制图形canvas元素本身并不能实现图形绘制功能，绘制图形的工作需要由JavaScript来完成。使用JavaScript可以在canvas元素内部添加线条、图片和文字，也可以在其中绘画，还能够加入高级动画。HTML5+CSS3网页设计基础教程第5章图形图像绘制第9页5.1.4Canvas坐标系在canvas元素中绘制图形时，需要为图形指定摆放位置。fillRect(50,50,100,100)的前两个参数就是指定所绘制矩形的x轴和y轴坐标值。在canvas中，坐标原点（0,0）位于canvas元素的左上角，x轴水平向右延伸，y轴向下延伸。HTML5+CSS3网页设计基础教程第5章图形图像绘制第10页主要内容5.1canvas元素基础5.2绘制简单图形5.3绘制贝塞尔曲线5.4绘制变形图形5.5丰富图形效果5.6图像处理5.7绘制文字5.8本章小结HTML5+CSS3网页设计基础教程第5章图形图像绘制第11页5.2绘制简单图形5.2.1绘制直线5.2.2绘制矩形5.2.3绘制弧线与圆形5.2.4绘制三角形5.2.5清空画布HTML5+CSS3网页设计基础教程第5章图形图像绘制第12页5.2.1绘制直线在canvas上绘制简单直线，主要用到3个方法：moveTo、lineTo和stroke。如果要设置直线端点的样子，可以使用lineCap属性指定。HTML5+CSS3网页设计基础教程第5章图形图像绘制第13页5.2.2绘制矩形绘制矩形时，需要用到fillStyle属性、fillRect方法，还可以使用strokeStyle和strokeRect方法。其中，fillStyle属性用于指定填充颜色；fillRect方法用于以指定的填充颜色绘制一个矩形；strokeStyle指定边框线颜色；strokeRect以指定的颜色绘制矩形轮廓。HTML5+CSS3网页设计基础教程第5章图形图像绘制第14页5.2.3绘制弧线与圆形HTML5提供了专门用于绘制圆形或弧线的arc方法和arcTo方法。arc方法的使用格式如下：arc(x,y,radius,startRad,endRad,anticlockwise)在canvas画布上绘制以坐标点(x,y)为圆心、半径为radius的圆上的一段弧线。这段弧线的起始弧度是startRad，结束弧度是endRad。这里的弧度是以x轴正方向(时钟三点钟)为基准、进行顺时针旋转的角度来计算的。anticlockwise表示是以逆时针方向还是顺时针方向开始绘制，如果为true则表示逆时针，如果为false则表示顺时针。anticlockwise参数是可选的，默认为false，即顺时针。HTML5+CSS3网页设计基础教程第5章图形图像绘制第15页5.2.4绘制三角形和绘制矩形一样，绘制三角形可以是实心的，也可以是空心的（也就是没填充色，光有轮廓线）。绘制实心三角形使用fill()方法，绘制空心三角形用stroke()方法。HTML5+CSS3网页设计基础教程第5章图形图像绘制第16页5.2.5清空画布清空画布的方法有以下3种：►第一种，也就是最简单的办法，由于canvas每当高度或宽度被重设时，画布内容就会被清空。►第二种方法，使用clearRect方法。►第三种方法，类似于方法2，可以用某一特定颜色填充画布，从而达到清空的目的。HTML5+CSS3网页设计基础教程第5章图形图像绘制第17页主要内容5.1canvas元素基础5.2绘制简单图形5.3绘制贝塞尔曲线5.4绘制变形图形5.5丰富图形效果5.6图像处理5.7绘制文字5.8本章小结HTML5+CSS3网页设计基础教程第5章图形图像绘制第18页5.3绘制贝塞尔曲线5.3.1二次贝塞尔曲线5.3.2三次贝塞尔曲线HTML5+CSS3网页设计基础教程第5章图形图像绘制第19页5.3.1二次贝塞尔曲线绘制贝塞尔曲线需要用到quadraticCurveTo()方法，使用方法如下：quadraticCurveTo(cpx,cpy,x,y)HTML5+CSS3网页设计基础教程第5章图形图像绘制第20页5.3.2三次贝塞尔曲线三次贝塞尔曲线则需要使用到3个控制点，绘制方法如下：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)HTML5+CSS3网页设计基础教程第5章图形图像绘制第21页主要内容5.1canvas元素基础5.2绘制简单图形5.3绘制贝塞尔曲线5.4绘制变形图形5.5丰富图形效果5.6图像处理5.7绘制文字5.8本章小结HTML5+CSS3网页设计基础教程第5章图形图像绘制第22页5.4绘制变形图形5.4.1保存与恢复canvas状态5.4.2移动坐标空间5.4.3旋转坐标空间5.4.4缩放图形5.4.5矩阵变换HTML5+CSS3网页设计基础教程第5章图形图像绘制第23页5.4.1保存与恢复canvas状态可以通过下面两个方法来实现保存绘图属性和获取属性：context.save();context.restore();HTML5+CSS3网页设计基础教程第5章图形图像绘制第24页5.4.2移动坐标空间canvas坐标空间默认以画布左上角(0,0)为原点，x轴水平向右为正向，y轴垂直向下为正向，该坐标空间的单位通常为像素。在绘制图形时，可以使用translate方法移动坐标空间，使画布的变换矩阵发生水平和垂直方向的偏移，其用法如下：context.translate(dx,dy);HTML5+CSS3网页设计基础教程第5章图形图像绘制第25页5.4.3旋转坐标空间若要旋转坐标空间，应使用rotate方法。rotate方法用于以原点为中心旋转canvas，实质仍是旋转canvas上下文对象的坐标空间，用法如下：context.rotate(angle);HTML5+CSS3网页设计基础教程第5章图形图像绘制第26页5.4.4缩放图形缩放图形主要通过scale()方法来实现，具体使用格式如下：ctx.scale(x,y);HTML5+CSS3网页设计基础教程第5章图形图像绘制第27页5.4.5矩阵变换矩阵变换主要通过transform()方法来实现。setTransform方法用于将当前的变化矩阵重置为最初的矩阵，然后以相同的参数调用transform方法，即先set（重置），再transform（变换）具体使用格式如下：context.transform(m11,m12,m21,m22,dx,dy);HTML5+CSS3网页设计基础教程第5章图形图像绘制第28页主要内容5.1canvas元素基础5.2绘制简单图形5.3绘制贝塞尔曲线5.4绘制变形图形5.5丰富图形效果5.6图像处理5.7绘制文字5.8本章小结HTML5+CSS3网页设计基础教程第5章图形图像绘制第29页5.5丰富图形效果5.5.1应用不同的线型5.5.2绘制线性渐变5.5.3绘制径向渐变5.5.4绘制图案5.5.5设置图形的透明度5.5.6创建阴影HTML5+CSS3网页设计基础教程第5章图形图像绘制第30页5.5.1应用不同的线型前面绘制过程中使用到了一些线条的方法和属性。通过lineWidth、lineCap、lineJoin、miterLimit属性，可以设置线条的粗细、端点样式、两线段链接处样式和绘制交点的方式。HTML5+CSS3网页设计基础教程第5章图形图像绘制第31页5.5.2绘制线性渐变前面绘制过程中使用到了一些线条的方法和属性。通过lineWidth、lineCap、lineJoin、miterLimit属性，可以设置线条的粗细、端点样式、两线段链接处样式和绘制交点的方式。createLinearGradient方法的使用如下：CanvasGradient=ctx.createLinearGradient(x0,y0,x1,y1)addColorStop方法的使用如下：CanvasGradient.addColorStop(offset,color)HTML5+CSS3网页设计基础教程第5章图形图像绘制第32页5.5.3绘制径向渐变径向渐变，其实就是环形的渐变，由圆心（或者是较小的同心圆）开始向外扩散渐变的效果。线性渐变指定了起点和终点，径向渐变则指定了开始的结束园的圆心和半径。径向渐变使用createRadialGradient来获得Canvas的CanvasGradient对象，所以addColorStop方法也是通用的。使用方法如下：CanvasGradient=ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)HTML5+CSS3网页设计基础教程第5章图形图像绘制第33页5.5.4绘制图案canvas中，createPattern方法用来实现图案效果，在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他canvas元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。其用法如下：context.createPattern(image,repeat|repeat-x|repeat-y|no-repeat);HTML5+CSS3网页设计基础教程第5章图形图像绘制第34页5.5.5设置图形的透明度canvas绘图中，有两种设置透明度的方法：globalAlpha属性和rg