canvas
文章平均质量分 94
单线程12138
这个作者很懒,什么都没留下…
展开
-
从0开始canvas系列四 --- 运动模型
【扩展】匀速/加速/弹性运动要了解这运动,首先你必须得对速度(v),位移(s),时间(t),加速度(a)完全了解,如果你完全了解上述概念,那你就可以直接跳过往下看,不清楚那就往下看吧s=vt相信接受过九年义务教育的你,对于这个公式不会陌生吧,但是你真的完全了解它吗上述公式仅适用于匀速运动,且s和v都是矢量,正负代表方向匀速直线运动即速度大小和方向不变的运动,其相同时间位移量变化一致,即v=Δs/Δt 为定值,速度是矢量,他有大小和方向s=vt或者s = s1+v*t代码中的匀速直线运动原创 2022-05-07 10:26:04 · 469 阅读 · 0 评论 -
从0开始canvas系列三 --- 图像像素级操作
从0开始canvas系列从0开始canvas系列一 — canvas画布从0开始canvas系列二 — 文本和图像从0开始canvas系列三 — 图像像素级操作图像像素级操作imageData对象大家都知道图片是由许多的像素点构成的,canvas对图像的操作也是基于像素点的,所有的像素点信息都可以存放在imageData实例中ImageData() 构造函数返回一个新的实例化的 ImageData 对象, 此对象由给定的类型化数组和指定的宽度与高度组成new ImageData([arr原创 2022-05-01 10:21:33 · 1171 阅读 · 0 评论 -
从0开始canvas系列二 --- drawImage
canvas画布简单案例经过第一期从0开始canvas系列,相信大家对于canvas都有了一定的了解,下面我们通过一个案例巩固下上一期的canvas案例一:霓虹灯特效<canvas id="canvas"></canvas><script> const canvas = document.getElementById('canvas'); //canvas充满窗口 canvas.width = window.innerWidth;原创 2022-04-21 23:36:20 · 763 阅读 · 0 评论 -
从0开始canvas系列一 --- canvas画布
什么是canvascanvas是HTML5新增的元素,通过javascript脚本来完成图形的绘制。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。简单来说,canvas提供了一张画布,调用getContext属性(可以是2d或者WebGL 3d)定义画笔,通过设置图像的填充或者描边属性,定义图形的绘图方式,完成一次图形的绘制,每次绘制都是已绘制路径作为一个绘制单元每一次绘制过程可以总结为以下步骤 //获取画布const canvas=document.querySel原创 2022-04-10 23:34:17 · 5359 阅读 · 0 评论