随笔分类 -  canvas

在canvas中使用其他HTML元素
摘要：做一个功能如下图，随机生成100个大小、颜色随机的小球。点击开始运动的时候，小球开始运动，然后点击停止运动的时候，小球停止运动。 点击旁边的白色或者黑色，则背景颜色变为相应的颜色。 HTML部分: <body> <div id="canvas-wrapper"> <canvas id="canvas 阅读全文
posted @ 2019-08-14 14:44 溢杨年华 阅读(293) 评论(0) 推荐(0)
使用canvas来完成线性渐变和径向渐变的功能
摘要：fillStyle的第二种使用情况就是渐变色的填充。渐变色就分为线性渐变色和径向渐变色。 线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数。 第一步 : 使用一个新的函数createLinearGradient( xstart，ystart,xend,yend ); var line 阅读全文
posted @ 2019-07-25 14:07 溢杨年华 阅读(2439) 评论(0) 推荐(0)
canvas的进阶 - 学习利用canvas做一个炫酷的倒计时功能
摘要：先给大家贴一张图片，因为我不会上传视频(￣□￣｜｜) ，请大家谅解了~ 如果有知道怎么上传视频的大神还请指点指点 ^_^ ~ 然后看一下代码: html部分 : 然后需要引入来控制小球位置来构成数字,来看一张图片:看到这张图片，想必大家就会明白了我们需要引入的数据结构。 看一下需要引入的digit. 阅读全文
posted @ 2019-06-27 17:33 溢杨年华 阅读(511) 评论(0) 推荐(0)
canvas的基础入门
摘要：canvas是定义在浏览器上的画布。它不仅仅是一个标签元素更是一个编程工具是一套编程的接口。利用它可以开发出很多东西，比如动画，游戏，动态的图表等富有变现力和感染力的应用。还可以开发出绚丽的3D动态效果。接下来我们一起学习！ 一、 创建canvas 看一下现在的效果: 除了上述代码那样指定canva 阅读全文
posted @ 2019-06-14 11:56 溢杨年华 阅读(1439) 评论(0) 推荐(3)