canvas
小白之旅
这个作者很懒,什么都没留下…
展开
-
canvas实现打字输入效果
实现效果在线试一试代码如下: const arr = ["H", "E", "L", "L", "O", "W", "O", "R", "L", "D"]; const c = document.getElementById("myCanvas"); const ctx = c.getContext("2d"); let index = 0; const draw = () => { if (index < arr.原创 2022-01-16 21:27:38 · 1513 阅读 · 0 评论 -
canvas状态的保存(save)和恢复(restore)
canvas的状态如何保存和恢复save():保存当前的绘图状态。restore():恢复之前保存的绘图状态。调用save方法将当前绘图状态保存到绘图堆栈中,每次调用restore方法从栈顶取出保存的状态。由于出栈的次数不能多于入栈的次数,故程序中restore方法调用的次数不应该比save方法多。save都可以保存什么?当前的坐标变换信息(比如旋转rotate()或平移setTransform())当前剪贴区域图形上下文对象(CanvasRenderingContext2D)的当前属原创 2022-01-12 09:08:02 · 11086 阅读 · 2 评论 -
canvas实现加载中
实现效果如下:在线试一试function loading2() { const canvas2 = document.getElementById("myCanvas2"); const ctx2 = canvas2.getContext("2d"); const w = canvas2.width; const h = canvas2.height; ctx2.fillStyle = "#000"; ctx原创 2022-01-08 21:45:58 · 529 阅读 · 0 评论 -
canvas实现简单进度条
canvas实现简单进度条效果如下:代码如下:在线试一试const c = document.getElementById("myCanvas");const ctx = c.getContext("2d");const deg = Math.PI / 180;let index = 0;fram();function fram() { index++; if (index <= 360) { requestAnim原创 2022-01-06 09:16:28 · 1184 阅读 · 0 评论 -
canvas渐变
canvas设置渐变的两种方式:createLinearGradient(x,y,x1,y1) : 创建线条渐变createRadialGradient(x,y,r,x1,y1,r1) : 创建一个径向/圆渐变在线试一试createLinearGradient(x,y,x1,y1)x:渐变开始点的 x 坐标y:渐变开始点的 y 坐标x1:渐变结束点的 x 坐标y1:渐变结束点的 y 坐标代码如下:const c = document.getElementById("myCanvas原创 2022-01-05 09:12:03 · 3521 阅读 · 0 评论 -
用canvas实现烟花效果
今天已经是2021年的最后一天了,马上就要是新的一年了,愿2022我们可以摘掉口罩。跨年怎么能没有烟花呢,下面请欣赏canvas带来的烟花秀: canvas实现烟花效果 在线试一试原文地址:https://www.cnblogs.com/visualiz/p/fireworks.html...原创 2021-12-31 09:06:51 · 1770 阅读 · 0 评论