04 2021 档案
摘要:canvas的主要功能就是用来绘制内容,有时候为了给用户流畅的视觉感受,需要绘制的频率要求很高,这样对绘制的性能就有要求,那么怎么才能写出高性能的绘制代码呢。 尽可能少调用api 例如我们绘制一段线条,如果用如下代码的话,每移动一次就stroke一次: 1 for (var i = 0; i < p
阅读全文
摘要:我们的项目是面向学校老师的教学软件,所以肯定少不了互动白板的功能,而这个里面的画笔功能是由我来开发的,下面介绍这个过程中遇到的问题以及解决方法。 首先给大家明确下由于软件中的画布可以自由移动,会超出屏幕显示范围,同时支持点擦和线擦,所以需要存储所有点坐标。 第一版简单画笔实现并优化掉折线感 第一版实
阅读全文
摘要:如果使用setInterval函数每100ms执行一段代码,中间有一次任务执行时间为1000ms,那么这次任务后会连续执行10次代码吗(即setInterval的任务会堆积吗) 为了测试这个问题,写了下面的代码,测试结果见控制台输出。 <script> startInterval(); //测试se
阅读全文
摘要:1、向量的定义 在数学中,向量(也称为矢量),指具有大小和方向的量。它可以形象化地表示为带箭头的线段。 箭头所指:代表向量的方向; 线段长度:代表向量的大小。 2、向量的点乘 向量点乘的数学定义: 向量点乘的几何意义: 向量的点乘可以用来计算两个向量之间的夹角,进一步判断这两个向量是否正交(垂直)等
阅读全文
摘要:假如有点 A (x1,y1) 、B (x2,y2)、C (x3,y3)计算他们的斜率 k = (y1-y2)/(x1-x2); 但是, x1如果和 x2 相等,则 k为无穷大,所以,我们代码里面,一般用数组k = [ y1-y2 , x1-x2 ]令 a = y1 - y2; b = x1 - x2
阅读全文
摘要:应用场景 我们的项目中有个功能是,canvas上的某个图片选中后可以再这个图片上用鼠标拖拽绘制画笔线条。 当然绘制的边界要控制在图片大小范围内的,那么鼠标是可以随意动的,怎么能控制只在图片上的时候才绘制呢? Canvas 2D API 有直接提供的方法:CanvasRenderingContext2
阅读全文
摘要:项目中一直有一个问题困扰着我,我们的画布可以缩放平移旋转,支持拖拽生成图形,生成手写笔迹,如果用户选择的线条粗细为5像素,那么即使画布缩放过绘制出的线条粗细也应该是视觉上的5px,所以再绘制时赋值给context.lineWidth的值需要一个计算过程(利用canvas当前缩放值来计算出一个值)。
阅读全文
摘要:杨辉三角与排列组合数 杨辉三角是二项式系数在三角形中的一种几何排列 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1特点: 一个数等于上面两个数相加。第m行n列的值(m,n从0开始)等于根据这个特点,可以统计的所有值,并存入一个二维数组中,为你所用,该数组形如: 1 0 0 0 01
阅读全文