脚本宝典收集整理的这篇文章主要介绍了html5教程-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
![这里写图片描述](https://img.blog.csdn.net/20170815104803762?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRzenQ4ODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
或者给它一个事件,让图片显示出来
或者给个延时器,设置延时时间
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
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
![这里写图片描述](https://img.blog.csdn.net/20170815104803762?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRzenQ4ODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
或者给它一个事件,让图片显示出来
或者给个延时器,设置延时时间
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所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。