第6章 html5的canvas绘图(html5与css3 web前端开发技术 知识).ppt

第6章 HTML5的Canvas绘图
canvas概述
1
绘制矩形
2
使用路径绘制图形
3
绘制颜色渐变的图形
4
使用坐标变换和矩阵变换绘图
5
在canvas中使用图像
6
绘制文字
7
使用canvas绘制动画
8
canvas概述
canvas是HTML5在网页上绘制图形的容器。在页面上放置的canvas元素相当于一块矩形画布。
canvas通过JS脚本可以绘制矩形、圆形、直线、字符以及图像等图形。

向HTML5页面添加canvas元素,需要指定元素的id、width和height属性。
<canvas id="canvasId" width="" height="" ></canvas>
canvas概述

canvas概述

(1)获取canvas元素
(2)获取绘图上下文(context)
(3)设定绘图样式(style)
(4)绘制图形
绘制矩形

Canvas API中绘制矩形方法包括以下4个:
方法
描述
rect()
创建矩形
fillRect()
绘制被填充的矩形
strokeRect()
绘制矩形(无填充)
clearRect()
在给定的矩形内清除指定的像素
表6-1 canvas绘制矩形的方法
绘制矩形
(2) 透明度
绘图上下文的globalAlpha属性设置或返回图形的当前透明度值(alpha 或 transparency)。
=number;

绘制矩形
(2) 透明度

使用路径绘制图形

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