canvas

题记 前端需求之高斯模糊图片 最近工作中有一个需求，客户提交图片，服务器根据图片生成内容，并将内容显示，要求高斯模糊处理用户的图片并作为作品展示的背景，类似于苹果设备上的高斯模糊背景。用户提交的图片分网络图片地址、终端设备上传两种。要求兼容各大浏览器。 解决方案一：CSS3滤镜 在CSS3 中规定了一个新的图形特效：filter ，可以对元素进行模糊、锐化或者元素变色。 filter 目的是用来调整图片、背景和边界的渲染。 在CSS3 中已经实现了filter 的一些预定义函数，MDN 中介绍如下： filter: url("filters.svg#filter-id"); filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* Apply multiple filters */ filter: contrast(175%) brightness

布局渲染流程优化 一、CPU与GPU绘制原理 CPU 的任务繁多，做逻辑计算外，还要做内存管理、显示操作，因此 在实际运算的时候性能会大打折扣，在没有 GPU 的时代，不能显示复 杂的图形，其运算速度远跟不上今天复杂三维游戏的要求。即使 CPU 的工作频率超过 2GHz 或更高，对它绘制图形提高也不大。这时 GPU 的设计就出来了。 CPU 的控制器较为复杂，而 ALU 数量较少。因此 CPU 擅长各种复杂 的逻辑运算，但不擅长数学尤其是浮点运算。 二、卡顿原理分析 1、当一帧的画面渲染超过16ms的时候，我们就会感觉到卡顿。 首先我们要先明确，我们的手机频率为60FPS，意思为我们的手机会在1秒内刷新60次，也就是约16ms刷新一次。 Android 系统每隔 16ms 发出 VSYNC 信号 (1000ms/60=16.66ms) ，触发对 UI 进行渲染， 如果每次渲染都成 功这样就能够达到流畅的画面所需要的 60fps ，为了能够实现 60fps ，这意味着计算渲染的大多数操作都必须 在 16ms 内完成。 这就仿佛我们的手机会16ms发送一趟列车，如果你没有坐上只能等下一趟。 如果错过了，比如说我们花费34ms才完成计算，那么就会出现我们称之为丢帧的情况。 2、16 毫秒的时间主要被两件事情所占用 ： 第一件：CPU将UI对象转换为一系列多边形和纹理 第二件

这是一个仿支付宝芝麻信用分的一个canvas，其实就是一个动画仪表盘。 首先， 上原图： 这个是在下支付宝上的截图，分低各位见笑了。然后看下我用canvas实现的效果图： <canvas id="canvas" width="400" height="700" data-score='724'></canvas> <!-- 设置data-score，分数区间[400, 900] --> 唉，总感觉不像。这个是GIF图，可能在网页上打开的效果会好一点( 当然可能就是这样 )。大家可以点击底部预览codepen上的演示。有两个不完美的地方，一个是实际上芝麻信用表盘上的的刻度是不均匀的，我这为了简单的实现就采取相同的刻度；二是表盘上运动的点是有模糊的效果，还没解决。唉，下次再说吧。 接下来还是来说说怎么实现的吧。第一步，国际惯例，创建画布： var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), cWidth = canvas.width, cHeight = canvas.height; 然后绘制表盘，虽说不是处女座，但也要尽可能做到跟原图上的一样，那就是这个环形开口的角度是多少呢？请上ps来测一下： 嗯，136°，这个角度确实刁钻，为了方便接下来的计算，那就约等于140°

概述 基于Canvas实现的仪表盘及效果。通过配置参数，可以任意修改仪表盘颜色，刻度，动画过渡时间等，满足不同场景下的使用。同时使用原生的Canvas，也是学习Canvas的很好的例子。 详细 代码下载： http://www.demodashi.com/demo/13031.html 一、演示效果 仪表盘效果如下： 二、项目结构截图 gauge.js文件是canvas仪表盘的主逻辑，demo.html中是使用的方法。 注：本例子只有2个文件，如上图所示。 三、使用方法 在html中，加入一个canvas的元素，设置宽高为510。 <canvas width=510 height=510 id="gauge"></canvas> <script src="./gauge.js"></script> //然后配置仪表盘 var my_canvas_obj= document.getElementById("gauge"); var gauge2 = new Gauge({ "tick_length": 12, "large_tick_length": 22, "tick_thickness": 1, "tick_group_length": 9, "ticks_groups_begin": 0, "total_degrees": 250, "total_tick": 101,

　　 一、绘制基本图形 　　在每次用canvas画布时，都有几步是“套路” 　　1.在HTML中创建Canvas画布： <canvas id="mycanvas" width="960px" height="580px"> 浏览器不支持canvas <!-- 如果不支持会显示这段文字 --> </canvas> 　　2.获取画布标签，并得到一个2D对象： var c = document.getElementById('mycanvas'); //获取标签 var ctx = c.getContext("2d"); //返回一个用来绘制环境类型的环境，返回一个2D对象 ，该对象实现了一个画布使用的大多数方法。 　　1、绘制线条： ctx.lineWidth = 10; //设置线条宽度 ctx.strokeStyle = "red"; //设置线条的颜色 ctx.beginPath(); //创建一个新的路径 ctx.moveTo(10,10); //将画笔光标位置移动到坐标（10,10）处 ctx.lineTo(150,10); //移动画笔到坐标（150,50）处 ctx.stroke(); //开始绘制定义好的路径 　　 通过ctx.lineCap="butt"可以设置线条的形状。有三个可取值：butt、round、square。 　　 2、绘制空心矩形： md5

顺序表 顺序表是在计算机内存中以数组的形式保存的线性表，线性表的顺序存储是指用一组地址连续的存储单元依次存储线性表中的各个元素、使得线性表中在逻辑结构上相邻的数据元素存储在相邻的物理存储单元中，即通过数据元素物理存储的相邻关系来反映数据元素之间逻辑上的相邻关系，采用顺序存储结构的线性表通常称为顺序表。顺序表是将表中的结点依次存放在计算机内存中一组地址连续的存储单元中。 顺序表的插入 对于顺序表，在进行插入之前，首先需要找到待插入的位置，以递增有序的顺序表为例 function SqlistInFind ( a , x ) { for ( var i = 0 ; i < a . length ; i ++ ) { if ( x < a [ i ] ) { return i ; } } return i ; } 如上所示，查找插入位置时，按顺序遍历顺序表内所有元素，若找到大于待插入元素的元素，则返回当前位置，否则返回顺序表长度，即插入到最最后。 找到待插入位置之后，即调用进行插入操作的函数 function SqlistInsert ( a , p , x ) { for ( var i = a . length - 1 ; i >= p ; i -- ) { a [ i + 1 ] = a [ i ] ; } a [ p ] = x ; return a ; } 如上所示