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

第6章 HTML5的Canvas绘图
canvas概述
1
绘制矩形
2
使用路径绘制图形
3
绘制颜色渐变的图形
4
使用坐标变换和矩阵变换绘图
5
在canvas中使用图像
6
绘制文字
7
使用canvas绘制动画
8
canvas概述
canvas是HTML5在网页上绘制图形的容器。在页面上放置的canvas元素相当于一块矩形画布。
canvas通过JS脚本可以绘制矩形、圆形、直线、字符以及图像等图形。
1．创建canvas元素
向HTML5页面添加canvas元素，需要指定元素的id、width和height属性。
<canvas id="canvasId" width="" height="" ></canvas>
canvas概述

绘制矩形
2．绘图时的颜色与透明度属性
（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,)表示半透明的绿色。
绘制矩形
2．绘图时的颜色与透明度属性

绘制矩形
（2） 透明度
绘图上下文的globalAlpha属性设置或返回图形的当前透明度值（alpha 或 transparency）。
=number;

绘制矩形
（2） 透明度

使用路径绘制图形
1．绘制圆形
canvas惟一支持基本形状－矩形。其它形状必须通过组合一个或多个路径来创建。使用路径来绘制图形，先要取得绘图上下文，然后按照开始创建路径、创建图形路径、关闭路径，调用绘图方法等步骤来完成。
（1）开始创建路径
();
（2）绘制图形路径
(x,y,radius,startAngle,endAngle,anticlockwise)
（3）关闭路径
();
（4）设定绘制样式，绘制图形