第6章 HTML5的canvas绘图(HTML5与CSS3 Web前端开发技术).ppt

HTML5+CSS3 Web 前端开发技术第6章 HTML5的Canvas绘图canvas概述1绘制矩形2使用路径绘制图形3绘制颜色渐变的图形4使用坐标变换和矩阵变换绘图5在canvas中使用图像6绘制文字7使用canvas绘制动画8HTML5+CSS3 Web canvas概述canvas是HTML5在网页上绘制图形的容器。在页面上放置的canvas元素相当于一块矩形画布。canvas通过JS脚本可以绘制矩形、圆形、直线、字符以及图像等图形。,需要指定元素的id、width和height属性。 <canvas id="canvasId" width="" height="" ></canvas>HTML5+CSS3 Web +CSS3 Web (1)获取canvas元素(2)获取绘图上下文(context)(3)设定绘图样式(style)(4)绘制图形HTML5+CSS3 Web API中绘制矩形方法包括以下4个:方法描述rect()创建矩形fillRect()绘制被填充的矩形strokeRect()绘制矩形(无填充)clearRect()在给定的矩形内清除指定的像素表6-1 canvas绘制矩形的方法HTML5+CSS3 Web (1)颜色?颜色名:直接使用颜色的英文名称作为属性值? #rrggbb:用一个6位的十六进制数表示颜色,例如,#0000FF表示蓝色? #rgb:是#rrggbb的一种简写方式,例如,#0000FF可以表示为#00F,#00FFDD表示为#0FD。? rgb(rrr,ggg,bbb):使用十进制数表示颜色的红、绿、蓝分量,其中,rrr、ggg、bbb都是0~255的十进制整数。例如,rgb(0,0,0)代表黑色。? rgb(rrr%,ggg%,bbb%):使用百分比表示颜色的红、绿、蓝分量,例如,rgb(50%,50%,50%)表示rgb(128,128,128)。? rgba(rrr,ggg,bbb,alpha):使用十进制数表示颜色的红、绿、蓝分量,alpha表示颜色的透明度,例如rgba(0,128,0,)表示半透明的绿色。HTML5+CSS3 Web +CSS3 Web 绘制矩形(2)透明度绘图上下文的globalAlpha属性设置或返回图形的当前透明度值(alpha 或 transparency)。 =number;+CSS3 Web 绘制矩形(2)+CSS3 Web -矩形。其它形状必须通过组合一个或多个路径来创建。使用路径来绘制图形,先要取得绘图上下文,然后按照开始创建路径、创建图形路径、关闭路径,调用绘图方法等步骤来完成。(1)();(2)(x,y,radius,startAngle,endAngle,anticlockwise)(3)();(4)设定绘制样式,绘制图形