1、 回顾canvas画板
例1
如果支持canvas则文字不显示，不支持canvas的浏览器会显示文字。
比如ie较低的版本是不支持canvas,就会把文字显示出来。
例2
可直接对画板进行大小的设置，也可以用style设置。设置 背景颜色 和背景图片都可以成功显示。background：url( img /1. jpg ).
例3 绘制 方块
C1是之前定义的画板，从画板中获取 画笔 给ctx.
给 stroke Rect的边框加 宽 度。
这个20代表从框的左右两边加10，如下图 红色 标注所示。
例4、添加 边框颜色 和方块颜色
例5、透明度
例6、清除前面所画的画板的内容
例7、动态画板
@H_349_ 126 @
必须要清除之前的。实现的效果是黑色的小块从左边移到 右边 知道 消失 。
要想实现让小块从左边移到右边再从右边返回到左边的效果，代码如下，方法一：
方法二：
例8、绘制路径的方法
注意加ctx.closePath()的区别
如果用fill方法，可以不闭合，也能从尾点找到起点
例9、 制作 一个写字板，当鼠标点击时可以画画，当鼠标松开时就不能画了，鼠标溢出方块后也不能画了
例10、绘制一个 圆 形
@H_ 360 _192@
半 圆
按度数画，画30度
加true或false
如果改成true,就逆时针画圆形，如下图所示
例11、绘制一个卡通图
吃 豆豆
画圈部分为IE兼容
对键盘按键上下左右进行设置(讲的也不明白，听的不是很明白)
例12、写字的方法
默认情况下，text是小框在大框上面
通过textbaseline变成下图
@H_738_ 304 @
通过textAlign= center 变成下图
文本内容，x坐标，y坐标
如何让文本靠右边框对齐
strokeText与fillText的区别
可用fillStyle和strokeStyle做样式
例13环形 进度 条
下午所讲内容
1绘制随机验证码— -i ndex1.ht ML
2、image的使用方法—index2.html
或者 给它一个事件，让图片显示出来
或者给个 延时器 ，设置延时时间
3、图片随着鼠标的移动而移动—index3.html
4、渐变-
线性渐变—index4.html
相当于抠下来两个圆
径向渐变—index5.html
径向渐变(特殊)—index6.html
5、位移画笔—index7.html
清除图，是从移动后的点 开始 的
旋转使用rotate
6、飞机旋转—index9.html
7、切割—inde X10 .html
8、折线—index11.html
9、轮椅—index12.html
@H_204_ 512 @
10、平铺—index13.html
平铺的方式如下：
11、阴影—index13.html
&nbs p;
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
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5-canvas 全部内容，希望文章能够帮你解决 html5教程-HTML5-canvas 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5-canvas的详细内容...