![](https://img-blog.csdnimg.cn/20201020180134113.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Canvas
文章平均质量分 93
Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域,我在这里存放一些高级JS、Canvas动画。
我不是费圆
不积跬步无以至千里,不积小流无以成江海
展开
-
JS实现登录、注册,Canvas图形二维码
原生JS实现登录注册,Canvas绘制图片二维码,本地缓存模拟数据库,入门三周可以学。网页仿“卷皮网”,如有侵权,请联系删除。从构思到实践花了两周,不准备公开源码设计思路及部分引导如下:设计思路:首先你得有手,学过JS,没吃透不要紧,明白JS能做哪些事;用onblur 事件对输入的用户名进行验证,也可以用oninput ,检测到用户名存在显示欢迎文本,或让其头像昵称显示,如未检测到则提示注册;正则验证小gif图标,通过修改其src 或css隐藏、显示来动态切换,当全部正则通过,则提交按钮可原创 2020-12-22 00:01:54 · 814 阅读 · 0 评论 -
Canvas 自由落体
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>炫彩小球自由掉落</title><style> body{margin:0;padding:0;overflow:hidden;} #title { position: absolute; top: 50%; left: 50%; transform: transl.原创 2020-11-24 09:55:41 · 474 阅读 · 0 评论 -
程序员蠕动的脑神经
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>程序员蠕动的脑神经</title> <style> body, html { margin: 0px; padding: 0px; position: fixed; background: rgb(30, 30, 30); .原创 2020-11-20 17:43:37 · 217 阅读 · 0 评论 -
Canvas动画展示(番外)
canvas动画: 1.清空canvas 在绘制每一帧动画之前,需要清空所有。清空所有最简单的做法就是clearRect()方法 2.保存canvas状态 如果在绘制的过程中会更改canvas的状态(颜色、移动了坐标原点等),又在绘制每一帧时都是原始状态的话,则最好保存下canvas的状态 3.绘制动画图形 从这里开始一帧一帧的绘制动画 4.恢复canvas状态 如果你前面保存了canvas状态,则应该在绘制完成一帧之后恢复canvas状态 5.控制动画 我们可用通过原创 2020-10-24 11:03:48 · 717 阅读 · 0 评论 -
Canvas圆形时钟
今天带来一个圆形时钟,用JQ编写的Canvas 代码。Canvas 的神奇之处就在于,可以自行绘制图片不需要外部引入,当你深入了解这项技术的时候,你也会忍不住赞叹他的神奇之处。 虽然我一再强调,自学也是人生的一门必修课。但哪怕我接连几天不眠不休写出了 Canvas 教程,大家还是置若罔闻,要求我在代码中写下详细注释。从我的角度来讲:不写注释可以减少代码量,大批量的注释会显得十分冗余,我出的 Canvas 教程如果大家认真阅读、练习的话,读懂这些代码不成问题。就好像对着官方文档我可以手写JQuery原创 2020-10-11 12:27:59 · 3828 阅读 · 19 评论 -
Canvas 绘制点线相交
随机产生一些直线,当直线相交时产生交点,直线不断移动,交点的位置也随之改变。<!doctype html><html><head><meta charset="utf-8"><title>Canvas绘制点线相交</title><style> body { background-color: #eee; overflow: hidden; } canvas { backg原创 2020-10-07 16:35:48 · 1852 阅读 · 0 评论 -
Canvas监测雷达
我也学人家发一个库存,本人承诺第一次这样干。因为刚刚删改了21篇博客,怕明天周排名会掉很多。删改的博客只有小部分留下了,大部分直接清除了,其中6篇在审核中。尽管没有人要求我这样做,但物竞天择,如果我的博客整体质量很差,注定在CSDN上走不了很远。一遍遍的删改不仅能让我认识到自身的不足,明确以后的优化方向,还可以提升自己博客的整体质量,大家不用为我惋惜。效果图:<!doctype html><html><head><meta charset="utf-原创 2020-10-05 23:23:59 · 1426 阅读 · 16 评论 -
Canvas基础教程(章节3)
这节主讲 Canvas 绘制贝塞尔曲线,首先我们要了解 什么是贝塞尔曲线? 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线, 是应用于二维图形应用程序的数学曲线。 一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。 贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop 等。在Flash4 中还没有完整的曲线工原创 2020-10-04 23:59:54 · 1885 阅读 · 3 评论 -
Canvas基础教程(章节2)
发现一个好玩小技巧,如果浏览器不支持 Canvas 画布怎么办?别这样写,太 low 了试试这个 ????哇哦,我学会了。来吧!开始今天的学习内容渲染上下文 < canvas>会创建一个固定大小的画布,会公开一个或多个 渲染上下文(画笔),使用 渲染上下文来绘制和处理要展示的内容。 我们重点研究 2D渲染上下文。其他的上下文我们暂不研究,比如, WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。//获得 2d 上下文对象原创 2020-10-03 14:38:30 · 2464 阅读 · 9 评论 -
Canvas基础教程(章节1)
这是我的第一篇Canvas 基础教程,我先简述一下什么是Canvas 。 H5 新增内容,允许脚本语言动态渲染图像,是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域,类似于其他通用的二维 API,通過一套完整的绘图函数来动态生成图形。一些可能的用途,包括使用 Canvas 构造图形,动画,游戏和图片。Canvas 对象的属性height 属性: 画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变原创 2020-10-02 22:54:32 · 1820 阅读 · 7 评论 -
Canvas线条花环
可喜可贺!庆祝电脑起死回生,庆祝一天好过一天。深夜给电脑安装了开发插件,第二天莫名死机,问了好多人都说主板坏掉了,需要重装系统。我先是对着 宾夕法尼亚大学 的方向拜了拜,又是一番操作,终于唤醒了老伙计度假的心。 写一个Canvas 动画送给你们,十五的月亮十六圆,多给家人一些陪伴。 今晚我会出一期Canvas 动画详细教程,如果你欣赏我的动画,可以添加收藏,请查看我的置顶文章,我将不胜感激。请看源码:<!DOCTYPE html><html lang="en" &g.原创 2020-10-02 14:54:55 · 1685 阅读 · 5 评论 -
JS新版激流勇进附地图详解
8月份激流勇进没有多余的注释,把所有的东西都交给大家。球球的弹力、重力等都已标注清晰,必要的注释也已补齐,地图密码如下:①通道球体可自由通过,不受任何限制②墙壁移动受阻,行动壁垒③水减速,可在水中游动④气流默认向上,按 ↑ 可顺气流飞起⑤弹簧落在弹簧上,可增大弹力⑥泥阻碍移动,无法叠加弹力⑦皮肤像变色龙一样,有(透明)色⑧终点触摸通关⑨岩浆触摸死亡⑩特殊墙壁能阻碍移动,能转换为通道⑪机关打开所有的10,将其转原创 2020-09-02 01:18:50 · 6271 阅读 · 32 评论 -
Canvas悟空推箱子
Canvas悟空推箱子 “学如逆水行舟,不进则退”,工作之余我总会浏览一些先进前端知识以增强自己的知识储备,偶尔也会试着开发或模仿小游戏、程序、app 。昨天在 站长之家 发现了这个游戏,触动很大,先是玩了一晚上,只过了13关,今天把注释写上了,截取了前40关分享给大家,希望大家在玩耍之余能抽出时间学习或了解前端,前端是门手艺,它会像筷子一样离不开人们的生活。 个人能力有限,只能解答博友们一些浅显的问题,甚至不如百度百科及时、准确,如今前端就业形式一片大好,在一线城市薪资过万,优秀的前端工程师只需要原创 2020-09-07 20:44:38 · 21591 阅读 · 61 评论 -
Canvas线条动画
Canvas线条动画 简单的Canvas动画,代码只有71行,试试吧!没有谁天生就会,用这个动画,做为你的Canvas小结。 如果你觉得我的代码还算有趣,在你的学习中能有所帮助,请查看我的置顶文章,我由衷感谢!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="jquery.js"></script> <title>原创 2020-09-03 19:23:39 · 7594 阅读 · 40 评论 -
情人节送给粉丝的礼物
怦然心动感谢你们一直陪伴至今,我不善于表达,我对你们的感激都在这张画布里。代码不算多,特效也很一般,往后的日子全力以赴发表优秀文章,愿你们web学习一帆风顺,所向披靡。把东坡居士的祝愿送给你们:;愿你们“但愿人长久,千里共婵娟”;愿你们“春宵一刻值千金,花有清香月有阴”;愿你们“鸳鸯被里成叠夜,一树梨花压海棠”;<!DOCTYPE html><html lang="en"><head> <meta char原创 2020-08-25 20:42:55 · 5860 阅读 · 49 评论 -
JS--你没玩过的激流勇进
我做的激流勇进,也是你从未玩过的激流勇进我称它为:偷火种的普罗米修斯纯代码不含图片,复制粘贴即可使用新手请点击下方链接,包教包会一次就能学废<!doctype html><html><head><meta charset="utf-8"><title>Canvas激流勇进</title><style>* { margin: 0; padding: 0;}bod原创 2020-08-24 20:00:06 · 8993 阅读 · 61 评论 -
Canvas游动的花花肠子
Canvas顶级动画之绽放的黎明相应注释都写在源码之中,源码部分摘录自源码之家源码之家官方链接代码比较精简,适合有一定Canvas基础的程序员开发,如果你没有基础,请点击它:有手就能学,HTML入门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>原创 2020-08-23 10:29:32 · 10548 阅读 · 51 评论 -
阿波罗的轻语
JS中的Canvas动画几天没写博客了,今天又忙到很晚,教大家做一个波浪花环吧效果图如上所示:老规矩先把代码给大家,新建一个html文档(新建一个txt文本文档,把后缀名改为“ .html”),以记事本打开,把复制好的代码粘贴进去,“ 保存 ”,退出,双击或右键选择浏览器打开。祝大家前端学习愉快,在今后的日子中与君共勉<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g原创 2020-08-20 21:42:10 · 9179 阅读 · 31 评论