HTML5-canvas

时间2024-01-26 19:53:03发布访客分类HTML浏览918

导读：收集整理的这篇文章主要介绍了html5教程-HTML5-canvas，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 1、回顾canvas画板...

收集整理的这篇文章主要介绍了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、动态画板

@H_13_126@

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

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

方法二：

例8、绘制路径的方法

注意加ctx.closePath()的区别

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

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

例10、绘制一个圆形

半圆

按度数画，画30度

加true或false

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

例11、绘制一个卡通图

吃豆豆

画圈部分为IE兼容

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

例12、写字的方法

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

通过textbaseline变成下图

@H_118_304@

通过textAlign=center变成下图

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

如何让文本靠右边框对齐

strokeText与fillText的区别

可用fillStyle和strokeStyle做样式

例13环形进度条

@H_777_351@

下午所讲内容

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

@H_482_360@

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

@H_136_512@

10、平铺—index13.html

平铺的方式如下：

11、阴影—index13.html