月度归档:2016年11月

记忆碎片

js获取时间戳的两种写法
var time = new Date().getTime();
var time = +new Date;

向上取整
Math.ceil();

向上取整 并 四舍五入
Math.round();

向下取整
Math.floor();

四舍五入 2表示保留两位小数
Math.toFixed(2)

js浮点数计算bug
31*0.015 = 0.46499999999999997

php浮点数计算结果
31*0.015 = 0.465

解决方案
31 * (0.015*100)/100 = 0.465

自定义滚动条样式::-webkit-scrollbar

.scroll_wrap {
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    zoom:1;
    scrollbar-base-color:#e8e8e8;
    scrollbar-arrow-color:#666;
    scrollbar-face-color:#b6b6b6;
    scrollbar-3dlight-color:#b6b6b6;
    scrollbar-highlight-color:#b6b6b6;
    scrollbar-shadow-color:#b6b6b6;
    scrollbar-darkshadow-color:#b6b6b6;
    scrollbar-track-color:#e8e8e8;
}
.scroll_wrap::-webkit-scrollbar {
    width:4px;
        height:4px;
    border-radius:4px;
    background:#e8e8e8;
}
.scroll_wrap::-webkit-scrollbar-track-piece {
    background:transparent
}
.scroll_wrap::-webkit-scrollbar-button {
    display:none
}
.scroll_wrap::-webkit-scrollbar-thumb {
    background:#b6b6b6;
    border-radius:4px
}

参考资料:
MDN::-webkit-scrollbar

css3画抛物线(三次贝塞尔曲线)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        .toCart{
            position: fixed;
            top: 200px;
            left: 0;
            will-change: transform;/*告诉浏览器提前做好适当的优化,使之最后能够快速和流畅的渲染。*/
            transform: translate3d(0, 0, 0);
        }
        .toCart .toCarts{
            position:absolute;
            z-index:999;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            background-color: #FF5B1E;
            border-radius: 50%;
        }
        .start{
            transition: transform 2s linear;
            transform: translate3d(400px,0,0);
           
        }
        .start .toCarts{
            transition: transform 2s cubic-bezier(.3,-0.2,1,0);/*贝塞尔曲线 抛物线 用来描述transform的运动曲线*/
            transform: translate3d(0,500px,0);
        }
       
        </style>
    </head>
    <body>
    <div class="toCart">
        <div class="toCarts"></div>
    </div>
    <button id="go">开始动画</button>
    </body>
    <script>
        document.getElementById('go').onclick = function(){

            document.querySelector('.toCart').className = 'toCart start';

            setTimeout(function(){
                document.querySelector('.toCart').className = 'toCart';
            },2e3)
        }
   
    </script>
</html>

贝塞尔曲线参数在线生成工具
参考文章:
实用的 CSS — 贝塞尔曲线(cubic-bezier)
张鑫旭-贝塞尔曲线与CSS3动画、SVG和canvas的基情
关于CSS的will-change属性的介绍
will-change MDN
查看demo
下载源码

canvas常用api

rect( x, y, width, height )   绘制矩形
fillRect( x, y, width, height )  绘制被填充的矩形
strokeRect( x, y, width, height )  绘制矩形(无填充)
clearRect( x, y, width, height ) 清除指定的矩形内的像素

fill()  填充当前绘图(路径)
stroke() 绘制已定义的路径
beginPath()  起始(重置)当前路径
moveTo( x, y )  将笔触移动到指定的坐标(x,y)
lineTo( x, y )  绘制一条从当前位置到指定的坐标(x,y)的直线
clip()  从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()  创建二次贝塞尔曲线
bezierCurveTo()   创建三次贝塞尔曲线
arc( x, y, radius, startAngle, endAngle, anticlockwise)  绘制圆或圆弧
arcTo( x1, y1, x2, y2, radius)  根据给定点画圆弧,再以直线连接两个点
isPointInPath( x, y )  检测指定的点是否在当前路径中,在则返回true

fillStyle  设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle  设置或返回用于笔触的颜色、渐变或模式
shadowColor  设置或返回用于阴影的颜色
shadowBlur   设置或返回用于阴影的模糊级别
shadowOffsetX  设置或返回阴影与形状的水平距离
shadowOffsetY  设置或返回阴影与形状的垂直距离

lineCap  设置或返回线条的结束点样式(butt、round、square)
lineJoin  设置或返回当两条线交汇时,边角的类型(bevel、round、miter)
lineWidth  设置或返回当前的线条宽度
miterLimit  设置或返回最大斜接长度

createLinearGradient( x0, y0, x1, y1 )  创建线性渐变
createPattern( image/canvas/video, repeat )  在指定的方向内重复绘制指定的元素
createRadialGradient( x0, y0, r0, x1, y1, r1 ) 创建径向渐变
addColorStop( stop, color )  规定渐变对象中的颜色和停止位置

font  设置或返回文本内容的当前字体属性(和css的font一样)
textAlign  设置或返回文本内容的当前对齐方式
textBaseline  设置或返回在绘制文本时使用的当前文本基线
fillText( text, x, y )  在画布上绘制“被填充”的文本
strokeText( text, x, y )  在画布上绘制文本(无填充)
measureText( text )  返回包含指定文本宽度的对象(属性width获取宽度)

drawImage( image/canvas, x, y )、drawImage( image/canvas, x, y, width, height )、drawImage( image/canvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  在画布上绘制图像、画布或视频

createImageData( width, height )、createImageData(imageData)  绘制ImageData对象
getImageData( x, y, width, height )  返回ImageData对象,该对象为画布上指定的矩形复制像素数据。
putImageData( ImageData, x, y )、putImageData( imageData, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  把图像数据放回画布上。
width  返回ImageData对象的宽度
height  返回ImageData对象的高度
data  返回一个对象,包含指定的ImageData对象的图像数据

globalAlpha  设置或返回绘图的当前alpha或透明度
globalCompositeOperation  设置或返回新图像如何绘制到已有的图像上。

scale( x, y )  缩放当前绘图
translate( x, y )  重新设置画布上的(0,0)位置
rotate( angle )  选择当前绘图,单位为“弧度”,角度转弧度公式( degrees*Math.PI/180
transform( m11, m12, m21, m22, dx, dy )  替换绘图的当前转换矩阵
setTransform()  将当前转换重置为单元矩阵,然后运行transform()

save()  保存当前环境的状态
restore()  恢复之前保存过的路径状态和属性

getContext('2d')  获取2d对象
toDataURL()  将canvas转换成图片,返回地址