canvas

作者: 书简_yu | 来源:发表于2019-02-11 17:38 被阅读0次

    2d上下文

    var ctx = document.getElementById('cvs').getContext('2d')
    

    绘制线条

     ctx.beginPath()
    
    ctx.moveTo(x, y) // 起点
    ctx.lineTo(x, y)  // 连线点
    ctx.lineTo(x, y) // 连线点2
    ……
    
    ctx.closePath()
    

    添加样式

    ctx.fillStyle = 'orangered'; // 填充颜色
    ctx.fill(); // 填充
    
    ctx.strokeStyle = 'beige' // 描边颜色
    ctx.stroke(); // 描边
    

    画线宽度 ctx.lineWidth = 2px;

    矩形绘制

    ctx.rect(x, y, w, h);
    
    ctx.fillRect(x, y, w, h);
    ctx.strokeRect(x, y, w, h);
    

    圆形绘制

    arc(x, y, r, startAngle, endAngle, true/false) // true/false 逆时针/顺时针
    

    贝塞尔曲线

    quadraticCurveTo(controlX, controlY, endX, endY) // 二次贝塞尔曲线
    
    bezierCurveTo(cx1, cy1, cx2, cy2, endX, endY) // 三次贝塞尔曲线
    

    绘制文字

    ctx.fillText(text, x, y, maxWidth); // 填充绘制
    ctx.strokeText(text, x, y, maxWidth); // 描边绘制
    
    • other
      安卓刷新下拉块的小圆,js实现思路


      Screenshot_2019-02-11-17-40-12-02.png

      利用cavans画圆,下拉距离与圆的圆周长度挂钩

    • other2 图片相关
      jpg有损压缩格式,靠损失图片的质量来减少图片的体积
      gif, png有损压缩格式,靠损失图片的色彩数量减少图片的体积
      ps源文件格式psd
      fw源文件格式png
      支持图片背景透明
      gif, png8, png24, png32
      支持图片本身透明
      png24, png32

    相关文章

      网友评论

          本文标题:canvas

          本文链接:https://www.haomeiwen.com/subject/zynqeqtx.html