canvas算法

Ⅰ canvas的drawimage方法没法绘制动态gif图

1.用img标签，然后浮在canvas上面，canvas和html结合作图才是王道。
2.读取gif的二进制数据，然后用一些算法解析出来，然后一桢一帧画出来，这个的确是有的，你可以在google搜一下，有一个框架，不过这种方法不太靠谱。就是玩的。

Ⅱ gif 怎么用Canvas 绘制 GIF 动画图

想让gif可控，就必须进行拆帧，比较好的软件推荐texturepack，固然也有在线的
gif
to
animation
目前还是只是个demo，还没写完。效果是这样的：
auto
play
分别为偏移背景，img浮动偏移，canvas渲染。

Ⅲ 怎么通过算法大量生成图片

首先需要制作一个nodejs小程序，然后通过该程序开始运行算法，通过小程序的建模生成图片，这样就可以通过算法生成大量的图片。首先，先介绍广告创意图片的整体生成流程：用户先提供必要的信息，如广告标题、促销信息、广告商品图等，然后通过接口发送做图程序。

做图程序是一个nodejs服务，nodejs会启动一个后端的headless模式的chrome，我们使用的是puppeteer，然后puppeteer启动真正的做图程序。

做图主程序使用js和canvas进行编写，js根据传入的参数，计算出最合适的模板，然后进行配色、配置背景图、装饰文本、装饰商品图等各种繁琐细节的操作，最终在HTML里通过canvas渲染出所有的创意图片。

最后再通过nodejs，做图完成，nodejs再调用puppeteer计算位置关系等进行截图，生成最终的图片。

Ⅳ 如何用Canvas绘制多种图形

HTML5 的标准已经出来好久了，但是似乎其中的 Canvas 现在并没有在太多的地方用到。一个很重要的原因是，Canvas 的标准还没有完全确定，不适合大规模用在生产环境。但是，Canvas 的优点也是很明显的，例如在绘制含有大量元素的图表的时候，SVG 往往因为性能问题而无法胜任，例如我见过的一次技术分享会的抽奖环节，虽然效果比较炫，但因为每个头像都是 DOM，利用 CSS3 控制的动画，导致了性能非常低下。此外，随着硬件性能的提高，视频截图、图像处理等功能也逐渐可以在网页上实现了，大多数网站用的是 Flash，但是 Flash 在 Mac 电脑上性能不高，还需要学一些额外的知识。Canvas 则是直接使用 javaScript 来进行绘图，对 Mac 友好，所以不失为 Flash 的一个继承者。

使用 Canvas
说了这么多，Canvas 究竟是个啥？
英文中 Canvas 的意思是“画布”，不过这里说的 Canvas 是 HTML5 中新出的一个元素，开发者可以在上面绘制一系列图形。Canvas 在 HTML 文件中的写法很简单：
<canvas id="canvas" width="宽度" height="高度"></canvas>

其中 id 属性是所有 HTML 元素都可以用的，Canvas 自带的属性只有后面两个（分别控制宽度、高度），没有其它的了。至于兼容性，CanIUse 上面写了，基础的功能目前用户使用的 90% 的浏览器都支持，所以大部分情况下还是可以放心使用的。

注意，一定要使用 Canvas 自带的 width 和 height 属性，不要使用 CSS 来控制，因为 CSS 控制会导致 Canvas 变形。可以试着与 PhptpShop 对比一下，后者是改变“图像大小”，前者才是正确的改变“画布大小”。例如下图是三张图片的横向拼接：最左边的黑框中是大小为 50px * 50px 的原图；中间是改变了图像大小为 100px * 100px 的效果，图像变得模糊，但是对于图像本身来说坐标范围并没有变大；最右边才是正确的 100px * 100px 的 Canvas。

Canvas 绝大部分的绘图方法都与 <canvas> 标签无关，需要使用 JavaScript 对其进行操作，这就是所谓的 Canvas API。
我们首先获取到这个元素：
var canvas = document.getElementById('canvas');

然后通过一个方法来获取可以调用一切 Canvas API 的入口：
var ctx = canvas.getContext('2d');

看到 2d 是不是很激动地联想到有没有 3d 呢？没有 3d 的写法，不过如果想要开启 3D 世界的大门，则可以写 canvas.getContext('webgl')。然而 WebGL 是基于 OpenGL ES 2.0 的一套标准，与本文是彻彻底底的两条路，因此这里就不讨论了。
Canvas 中的基本概念
坐标
与数学上常见的笛卡尔坐标系不太相同，Canvas 的坐标系是计算机中常见的坐标系，它长这样：

画布的最左上角是 (0,0)，往右 x 增大，往下 y 增大，而且 x 和 y 都是整数（就算在计算过程中不是整数，在绘制的时候也会当作整数处理），单位是像素。
绘图
带大家怀旧一下。不知道有多少同学小时候玩过 logo 语言，在里面你可以控制一只小海龟在一块板子上行走、画画、提笔、落笔。Canvas 中也一样，你需要控制一只画笔的移动和绘制。然而 Canvas 更高级一些，你可以直接利用一些函数来画图，不用去控制那只画笔的位置。
Canvas 中的基本图形
通过上文定义的 ctx 变量可以干许多有意思的事情，我们先看看如何绘制一些基本图形。
线条
我们指定画笔移动到某一点，然后告诉画笔需要从当前这一点画到另一点。我们可以让画笔多次移动、绘制，最后统一输出到屏幕上。例子如下：
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.moveTo(10, 20);
ctx.lineTo(40, 70);
ctx.stroke();

上面的代码中，lineTo 是产生线条用的函数，执行完之后画笔就移到了线条的终点。需要注意的是，线条此时并没有显示在屏幕上，必须调用 stroke 才会显示。这样设计是有道理的，因为向屏幕上输出内容需要耗费大量的资源，我们完全可以先攒够一波 lineTo，最后用 stroke 放一个大的。
路径
绘制路径非常简单，只需要先告诉 ctx 一声“我要开始画路径了”，然后通过各种方法（例如 lineTo）绘制路径。如果需要画一个封闭路径，那就最后告诉 ctx一声：“我画完了，你把它封闭起来吧。”当然，不要忘记利用 stroke 输出到屏幕上。
一个简单的例子：
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.closePath();
ctx.stroke();

如果我不想只描绘路径线条，而是想填充整个路径呢？可以将最后一行的 stroke 改成 fill，这样就跟使用了画图中的油漆桶一样，封闭路径里面的内容就都被填充上颜色了：
ctx.fill();

弧 / 圆形
绘制弧的函数参数比较多：
ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 起始角度, 终止角度, 是否为逆时针);

注意，在 Canvas 的坐标系中，角的一边是以圆心为中心的水平向右的直线。角度单位均为弧度。例如下图，确定了圆心、起始角度（图中标明的锐角）和终止角度（图中标明的钝角），方向为逆时针，于是就有了这么一个弧。如果方向为顺时针，那么就会是一个跟它互补的、非常非常大的弧……

所以如果转了 2π 圈之后，弧就成了圆形，因此也可以使用绘制弧的方式来绘制圆形：
ctx.beginPath();
ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 0, Math.PI * 2, true);
ctx.closePath();

最后一个参数随便填（当然也可以不填），因为不管是顺时针还是逆时针，转了 2π 圈之后都是一个圆。
矩形
如果只是想绘制一个横平竖直的矩形，可以使用下面的两个方法：
// 只描边
ctx.strokeRect(左上角 x 坐标, 左上角 y 坐标, 宽度, 高度);
// 只填充
ctx.fillRect(左上角 x 坐标, 左上角 y 坐标, 宽度, 高度);

线条样式 / 填充样式
之前绘制的所有图形都是黑色的，但是 Canvas 肯定不止这么一种颜色（不然标准的制定者会被喷的很惨）。事实上，Canvas 可以单独设置线条样式和填充样式，分别使用的是 strokeStyle 和 fillStyle。可能的值有三种：纯色、渐变、图像。既然线条样式与填充样式的使用方法相同，那么下面统一以填充样式为例。如果想设置线条样式，直接将所有的 fillStyle改成 strokeStyle 即可，里面的参数都不变。
/* 纯色填充 */
// 普通的颜色
ctx.fillStyle = '#0000ff';
// 带有透明度的颜色
ctx.fillStyle = 'rgba(64, 0, 127, 0.5)';

/* 渐变填充 */
// 设置渐变的尺寸（参数分别为起始点的 x 和 y、终止点的 x 和 y）
var gradient = ctx.createLinearGradient(0, 0, 170, 0);
// 设置过渡色，第一个参数是渐变的位置，第二个参数是颜色
gradient.addColorStop(0, 'magenta');
gradient.addColorStop(0.5, 'blue');
gradient.addColorStop(1.0, 'red');
// 设置填充样式
ctx.fillStyle = gradient;

/* 图片填充 */
// 创建图片
var image = new Image;
image.src = '/path/to/image.png';
// 创建图片笔触，可以指定图片的平铺方式，这里是横向平铺
var pattern = ctx.createPattern(image, 'repeat-x');
// 设置笔触填充
ctx.fillStyle = pattern;

关于渐变，除了代码中提到的线性渐变以外，还有 createRadialGradient，也就是径向渐变。
设置完填充样式之后，就可以使用 fill 来填充啦！如果设置的是线条样式，那么就可以使用 stroke 来描边。
当然，对于线条样式，还有个额外的方法叫 lineWidth 可以用来控制线条的宽度。
文字
要想在画布上画文字，首先需要知道所使用的字体和字号：
ctx.font = '30px Verdana';

然后就可以通过 strokeText 或者 fillText 来对字体描边或者填充字体。
ctx.strokeText("Hello Coding!", 23, 33);
ctx.fillText("Hello Coding!", 23, 66);

图片
在 Canvas 中绘制图片有三种方法：
// 指定绘制位置
ctx.drawImage(image, x, y);
// 指定绘制位置和图像宽高
ctx.drawImage(image, x, y, width, height);
// 指定剪裁区域、绘制位置和图像宽高
ctx.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);

参数的含义依次如下：
image: 要使用的 Image、Canvas 或 Video
sx: 可选，开始剪切的 x 坐标
sy: 可选，开始剪切的 y 坐标
swidth: 可选，被剪切图像的宽度
sheight: 可选，被剪切图像的高度
x: 在画布上放置图像的 x 坐标
y: 在画布上放置图像的 y 坐标
width: 可选，要使用的图像的宽度
height: 可选，要使用的图像的高度

画布设置
细心的同学可能会发现，刚才有些属性是直接对 ctx 变量做设置，例如 ctx.lineWidth，只要设置了它，那么后续画出来的线条全都是这么个宽度。
其实，Canvas 的设置项还有许多，例如我们可以直接移动画布、旋转画布、设置全局的绘制透明度等等。这些设置还可以随时保存和恢复。
要注意的一点是，所有已经画在画布上的东西，是已经定死了的，不管之后再次进行任何设置都不会再改变。这个很像 Windows 下的画图程序。
废话不多说，直接上代码：
// 移动画布，其实就是移动坐标系
ctx.translate(往右移动的量, 往下移动的量);
// 旋转画布，旋转中心为坐标系原点
ctx.rotate(顺时针旋转的角度);
// 以坐标系原点为中心缩放画布
ctx.scale(横向放大倍数, 纵向放大倍数);
// 设置绘制透明度，如果 fillStyle 等属性设置了透明度则会叠加
ctx.globalAlpha(零到一的小数);
// 设置全局组合操作
ctx.globalCompositeOperation = 'lighter';
// 保存当前设置
ctx.save();
// 恢复上次保存的设置
ctx.restore();

移动、旋转、缩放其实就是在控制绘图的坐标系，如果你在调用这三个方法的时候，脑子里时刻有一个带刻度的坐标系，效果会非常好。
事实上，Canvas 的坐标变换遵循计算机图形学的知识：变换矩阵。简单来说，一个坐标可以看成是一个矩阵，坐标所对应的矩阵乘上变换矩阵就可以实现对坐标的变换。为了提升计算的效率，可以先计算出几种变换复合之后的变换矩阵，然后直接通过 transform 函数对当前坐标系进行变换，或者通过 setTransform 函数将坐标系重置为初始状态后再进行变换。至于变换矩阵的内容，对于本文来说就有些超纲了。
全局组合操作有点像 PhotoShop 里面的“混合选项”，具体的实现方式还没有完全确定，目前常见浏览器都统一了的实现方式有：source-over、source-atop、destination-over、destination-out、lighter、xor。具体的行为可以看 Mozilla 官方文档，但是由于标准还未完全确定，因此其它浏览器不保证所有的行为都跟 Mozilla 的标准一致。一般来说，比较常见的是 source-over 和 lighter 两种，这两种的标准在浏览器界也算是无可争议的。
至于保存和恢复设置就有点好玩了，首先需要了解一个叫“栈”的东西。
栈是一个一维数组，规定只能从一个方向操作。栈一开始是空的，我们可以从这个方向往数组 push 元素，也只能从这个方向把最后一个元素（栈顶元素）pop 出来，除此以外没有任何多余的操作。当然，pop 的次数不能多于 push 的次数，因为 pop 到栈底的时候栈里就已经没有元素了，此时再 pop 是没有意义的。栈的用处有很多，例如括号匹配、表达式求值、深度优先搜索，甚至绝大部分语言的函数调用都要用到栈。
每次我们调用 save 函数，实际上是将当前的全局设置 push 到了一个专门栈上，每次调用 restore 函数的时候将最后一次保存的内容 pop 出来并用它覆盖当前的全局设置，这样栈顶就是最近一次保存的内容了。保存和恢复在某些情况下很好用，例如我需要画一个歪着的图形，然后继续画正着的图形，这样就可以先调用 save，然后调用 rotate，画完图形之后再 restore 回来，继续画其它的图形。
其实 Canvas 还有许多方法，例如 toDataURL 直接将当前画布上的内容转换为十六进制的 data-url，getImageData直接将图像转换为 RGBA 数组以供图像处理算法使用，putImageData 将 RGBA 数组转换为图片显示在画布上等等。如果配上 JavaScript 的定时更新（最好用 requestAnimationFrame 而不是 setInterval），则可以产生动画效果。网上还有许多 Canvas 的库，可以让程序员更简便地基于 Canvas 编写属于自己的特效或功能。在这儿我想说一句话：大家的脑洞有多大，Canvas 的能力就有多强~

Ⅳ canvas如何画这样的三角形

1：简单的办法，画一个3角，填充红，画一个圆，填充背景色，圆位置移动到想要的位置就好，这个java或html5好写点。canvas大多也就这两种语言才有吧。
2：用函数，这个好难，不过用微积分算法也可以实现，点的位置固定好，4段函数，3个线型，一个圆。

Ⅵ android获取surfaceview里面的每一帧

屏幕的显示机制和帧动画类似，也是一帧一帧的连环画，只不过刷新频率很高，感觉像连续的。为了显示一帧，需要经历计算和渲染两个过程，CPU 先计算出这一帧的图像数据并写入内存，然后调用 OpenGL 命令将内存中数据渲染成图像存放在 GPU Buffer 中，显示设备每隔一定时间从 Buffer 中获取图像并显示。
上述过程中的计算，对于View来说，就好比在主线程遍历 View树 以决定视图画多大（measure），画在哪（layout），画些啥（draw），计算结果存放在内存中，SurfaceFlinger 会调用 OpenGL 命令将内存中的数据渲染成图像存放在 GPU Buffer 中。每隔16.6ms，显示器从 Buffer 中取出帧并显示。所以自定义 View 可以通过重载onMeasure()、onLayout()、onDraw()来定义帧内容，但不能定义帧刷新频率。
SurfaceView可以突破这个限制。而且它可以将计算帧数据放到独立的线程中进行。下面是自定义SurfaceView的模版代码：
public abstract class BaseSurfaceView extends SurfaceView implements SurfaceHolder.Callback {
public static final int DEFAULT_FRAME_DURATION_MILLISECOND = 50;
//用于计算帧数据的线程
private HandlerThread handlerThread;
private Handler handler;
//帧刷新频率
private int frameDuration = DEFAULT_FRAME_DURATION_MILLISECOND;
//用于绘制帧的画布
private Canvas canvas;
private boolean isAlive;
public BaseSurfaceView(Context context) {
super(context);
init();
}
protected void init() {
getHolder().addCallback(this);
//设置透明背景，否则SurfaceView背景是黑的
setBackgroundTransparent();
}
private void setBackgroundTransparent() {
getHolder().setFormat(PixelFormat.TRANSLUCENT);
setZOrderOnTop(true);
}
@Override
public void surfaceCreated(SurfaceHolder holder) {
isAlive = true;
startDrawThread();
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
stopDrawThread();
isAlive = false;
}
//停止帧绘制线程
private void stopDrawThread() {
handlerThread.quit();
handler = null;
}
//启动帧绘制线程
private void startDrawThread() {
handlerThread = new HandlerThread(“SurfaceViewThread”);
handlerThread.start();
handler = new Handler(handlerThread.getLooper());
handler.post(new DrawRunnable());
}
private class DrawRunnable implements Runnable {
@Override
public void run() {
if (!isAlive) {
return;
}
try {
//1.获取画布
canvas = getHolder().lockCanvas();
//2.绘制一帧
onFrameDraw(canvas);
} catch (Exception e) {
e.printStackTrace();
} finally {
//3.将帧数据提交
getHolder().unlockCanvasAndPost(canvas);
//4.一帧绘制结束
onFrameDrawFinish();
}
//不停的将自己推送到绘制线程的消息队列以实现帧刷新
handler.postDelayed(this, frameDuration);
}
}
protected abstract void onFrameDrawFinish();
protected abstract void onFrameDraw(Canvas canvas);
}
用HandlerThread作为独立帧绘制线程，好处是可以通过与其绑定的Handler方便地实现“每隔一段时间刷新”，而且在Surface被销毁的时候可以方便的调用HandlerThread.quit()来结束线程执行的逻辑。
DrawRunnable.run()运用模版方法模式定义了绘制算法框架，其中帧绘制逻辑的具体实现被定义成两个抽象方法，推迟到子类中实现，因为绘制的东西是多样的，对于本文来说，绘制的就是一张张图片，所以新建BaseSurfaceView的子类FrameSurfaceView：
逐帧解析 & 及时回收
public class FrameSurfaceView extends BaseSurfaceView {
public static final int INVALID_BITMAP_INDEX = Integer.MAX_VALUE;
private List bitmaps = new ArrayList<>();
//帧图片
private Bitmap frameBitmap;
//帧索引
private int bitmapIndex = INVALID_BITMAP_INDEX;
private Paint paint = new Paint();
private BitmapFactory.Options options = new BitmapFactory.Options();
//帧图片原始大小
private Rect srcRect;
//帧图片目标大小
private Rect dstRect = new Rect();
private int defaultWidth;
private int defaultHeight;
public void setDuration(int ration) {
int frameDuration = ration / bitmaps.size();
setFrameDuration(frameDuration);
}
public void setBitmaps(List bitmaps) {
if (bitmaps == null || bitmaps.size() == 0) {
return;
}
this.bitmaps = bitmaps;
//默认情况下，计算第一帧图片的原始大小
getBitmapDimension(bitmaps.get(0));
}
private void getBitmapDimension(Integer integer) {
final BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
BitmapFactory.decodeResource(this.getResources(), integer, options);
defaultWidth = options.outWidth;
defaultHeight = options.outHeight;
srcRect = new Rec

Ⅶ canvas怎样画一个抽奖的圆盘

主要的思路： 根据弧度画扇形 算法求某个点是否在不规则形状内。“放射”算法

Ⅷ Canvas的drawText绘制文本自动换行（支持设置显示最大行数）

使用Canvas的drawText绘制文本是不会自动换行的，即使一个很长很长的字符串，drawText也只显示一行，超出部分被隐藏在屏幕之外。可以逐个计算每个字符的宽度，通过一定的算法将字符串分割成多个部分，然后分别调用drawText一部分一部分的显示， 但是这种显示效率会很低。

StaticLayout是android中处理文字换行的一个工具类，StaticLayout已经实现了文本绘制换行处理

StaticLayout的公开的构造函数有三个

以11个参数的构造方法为例，各个参数的意义如下：

通过查看源码，我们知道，11个参数的构造方法调用的是13个参数的构造方法，但是这个方法是@hide 的，我们是没有调用的，外部是无法知道的，但是我们可以通过反射获取，对反射不熟悉的可以参考这一片文章 你必须掌的握反射用法
我们可以看到最后一个参数，可以设置显示的最大行数，默认是Integer.MAX_VALUE
也就是说，利用这个可以设置这个属性

Ⅸ Rgb深色过渡到浅色的算法是什么我想用h5的canvas做一个烟花效果，有很多颜色，无论哪一种颜

rgba 4个数 用定时器逐渐变化值

Ⅹ 关于canvas在连接多点画线时使用曲线优化的一点心得

canvas将多个点连接成线，最主要还是用于使用鼠标绘画之类的用途，但是我们往往会发现使用这些点连接起来的线非常不规整，很不自然
所以大多数人想到优化这一点的方法应该就是将简单的点与点的直线连接改为带一定曲度的曲线

带着目的我在网上查找相应的文章然后找到了这个 博客
但是这个博客不早知道是没讲清楚还是写错了，你是没办法直接使用他的方法的，里面有些参数不清楚，而且因为太久的缘故里面的链接都失效了
所以我在网上搜索了里面提供的关键字： 贝塞尔曲线控制点确定的方法.doc 网络文库里有

根据里面的秒速完善了方法

第一个点和最后两个点的算法文档里面有说明我就不多说了

根据方法使用曲线画线方法划线

这里将直线改为曲线算成功了，但是我发现直接使用鼠标画的线依然很难看不自热，这是因为鼠标划线点过于密集的原因，可以在划线时间隔曲线将图形模糊处理

老实说感觉还是画出来的线比原来是好点，但是还是不自然的样子