HTML5-canvas

1、 回顾canvas画板

例1

如果支持canvas则文字不显示，不支持canvas的浏览器会显示文字。

比如ie较低的版本是不支持canvas,就会把文字显示出来。

例2

可直接对画板进行大小的设置，也可以用style设置。设置背景颜色和背景图片都可以成功显示。background：url(img/1.jpg).

例3绘制方块

C1是之前定义的画板，从画板中获取画笔给ctx.

给strokeRect的边框加宽度。

这个20代表从框的左右两边加10，如下图红色标注所示。

例4、添加边框颜色和方块颜色

例5、透明度

例6、清除前面所画的画板的内容

例7、动态画板

必须要清除之前的。实现的效果是黑色的小块从左边移到右边知道消失。

要想实现让小块从左边移到右边再从右边返回到左边的效果，代码如下，方法一：

方法二：

例8、绘制路径的方法

注意加ctx.closePath()的区别

如果用fill方法，可以不闭合，也能从尾点找到起点

例9、制作一个写字板，当鼠标点击时可以画画，当鼠标松开时就不能画了，鼠标溢出方块后也不能画了

例10、绘制一个圆形

半圆

按度数画，画30度

加true或false

如果改成true,就逆时针画圆形，如下图所示

例11、绘制一个卡通图

吃豆豆

画圈部分为IE兼容

对键盘按键上下左右进行设置(讲的也不明白，听的不是很明白)

例12、写字的方法

默认情况下，text是小框在大框上面

通过textbaseline变成下图

通过textAlign=center变成下图

文本内容，x坐标，y坐标

如何让文本靠右边框对齐

strokeText与fillText的区别

可用fillStyle和strokeStyle做样式

例13环形进度条

下午所讲内容

1绘制随机验证码—-index1.html

2、image的使用方法—index2.html


或者给它一个事件，让图片显示出来

或者给个延时器，设置延时时间

3、图片随着鼠标的移动而移动—index3.html

4、渐变-

线性渐变—index4.html

相当于抠下来两个圆

径向渐变—index5.html

径向渐变(特殊)—index6.html

5、位移画笔—index7.html

旋转使用rotate

6、飞机旋转—index9.html

7、切割—index10.html

8、折线—index11.html

9、轮椅—index12.html

10、平铺—index13.html

平铺的方式如下：

11、阴影—index13.html