Canvas 高级

一、Canvas 高级

1、变换--位移

  • translate(x, y)
    1201653-20171120183829836-2000693602.png

2、变换-缩放

  • scale(xS, yS)
    1201653-20171120183843258-1832753888.png

3、变换-旋转

  • rotate(弧度)

4、环境的保存和释放

  • save()
  • restore()
    1201653-20171120183855555-344884821.png

    5、设置透明度

  • globalAlpha 属性 设置绘图环境的不透明度 值0~1之间
    1201653-20171120205923852-1995094534.png
    1201653-20171120205931930-521157879.png

    6、限制绘图区域

  • clip() 配合路径。对绘图环境进行的限制

      <script>
          (function(){
              var canvas=document.getElementById("myCanvas");
    
              canvas.width=800;
              canvas.height=600;
              canvas.style.backgroundColor="#fff";
    
              var ctx=canvas.getContext("2d");
    
              ctx.save();
              ctx.beginPath();
              ctx.arc(300,300,150,0,Math.PI*2);
              ctx.clip();
    
              var img=document.createElement("img");
              img.src="01.jpg";
              img.onload=function(){
                  ctx.drawImage(img,0,0,800,600);
                  ctx.restore();
                  ctx.font="bold 100px 楷体";
                  ctx.fillText("雪景",500,400);
              }
          })();
      </script>

    1201653-20171120210715883-958227603.png

7、输出base64编码

  • canvasEle.toDataURL();

    8、画布渲染画布

  • 使用drawImage()把canvas元素当做img元素

    9、贝塞尔曲线

  • bezierCurvelTo()

      <script>
          (function(){
              var canvas=document.getElementById("myCanvas");
              canvas.width=800;
              canvas.height=600;
              canvas.style.backgroundColor="#fff";
              var ctx=canvas.getContext("2d");
    
              ctx.beginPath();
              ctx.moveTo(100,100);

原文链接:加载失败,请重新获取