方帅

摘要： 我们拿下图中的沿着线段轨迹移动的原点来举例，怎么来实现这个动画！ 1）定义路径集合Path，里面规定关键坐标点如startPoint和endPoint，设置从startPoint移动到endPoint的时间duration。 如下json对象，我们有6段路径，分别进行了定义。我们将下面这个列表集合命 阅读全文

摘要： 效果结尾处可验收。 画线准备 准备一个canvas <canvas id="canvasId" width="1000" height="800"></canvas> 使用pointer事件监听，落笔，拖拽，收笔。 document.onpointerdown = function (e) { if 阅读全文

摘要： 转盘效果 本文章讲解怎么实现这样一个螺旋转盘动态效果。不停旋转，箭头指向的扇形会变成高亮，整个转盘有个渐变效果，中间镂空。 利用图片填充颜色 首先准备如下三张图 三张图怎么利用？ 思路大概下面所标示的。第一张和第三种是盖到第二张上的，第二张图作为填充圆形的颜色。 因为用canvas本身的shadow 阅读全文

摘要： canvas的主要功能就是用来绘制内容，有时候为了给用户流畅的视觉感受，需要绘制的频率要求很高，这样对绘制的性能就有要求，那么怎么才能写出高性能的绘制代码呢。 尽可能少调用api 例如我们绘制一段线条，如果用如下代码的话，每移动一次就stroke一次： 1 for (var i = 0; i < p 阅读全文

摘要： 我们的项目是面向学校老师的教学软件，所以肯定少不了互动白板的功能，而这个里面的画笔功能是由我来开发的，下面介绍这个过程中遇到的问题以及解决方法。 首先给大家明确下由于软件中的画布可以自由移动，会超出屏幕显示范围，同时支持点擦和线擦，所以需要存储所有点坐标。 第一版简单画笔实现并优化掉折线感 第一版实 阅读全文

摘要： 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当前缩放值来计算出一个值）。 阅读全文

摘要： 杨辉三角与排列组合数 杨辉三角是二项式系数在三角形中的一种几何排列 １ １　１ １　２　１ １　３　３　１ １　４　６　４　１特点： 一个数等于上面两个数相加。第m行n列的值（m，n从0开始）等于​根据这个特点，可以统计的所有值，并存入一个二维数组中，为你所用，该数组形如：​ １　０　０　０　０１　 阅读全文