JS中canvas画布绘制中的缩放，位移，旋转

web.jpeg

1.缩放

• cxt.scale(2,2);
• 缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。

<script type="text/javascript">
    var canvas = document.getElementById("con");
    //获取上下文
    var cxt = canvas.getContext("2d");
    
    cxt.rect(0,0,100,100);
    cxt.fillStyle = "red";
    //缩放
    cxt.scale(2,2);
    //放大一倍,不仅仅是宽度和高度,其x,y也会跟着放大
    cxt.fillStyle = "blue";
    cxt.rect(100,100,100,100);
    
    //还原 缩小原来的一倍
    cxt.scale(0.5,0.5);
    
    
    cxt.fill();
    
</script>

image.png

2.位移

• ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
  • x： 添加到水平坐标（x）上的值
  • y： 添加到垂直坐标（y）上的值
  • 发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
    位移画布一般配合缩放和旋转等。

<script type="text/javascript">
    var canvas = document.getElementById("con");
    //获取上下文
    var cxt = canvas.getContext("2d");
    
    cxt.fillStyle = "red";
    cxt.fillRect(0,0,200,100);
    
    //位移  对之前的操作 没有影响
    cxt.translate(100,100);
    cxt.fillStyle = "blue";
    cxt.fillRect(100,100,200,100);
    
</script>

image.png

3.旋转

• context.rotate(angle); 方法旋转当前的绘图
• 注意参数是弧度（PI）
• 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

<script type="text/javascript">
    var canvas = document.getElementById("con");
    //获取上下文
    var cxt = canvas.getContext("2d");

  cxt.fillStyle = "red";
   cxt.fillRect(100,100,200,100);
   
   cxt.rotate(20 * Math.PI/180);
   cxt.fillStyle = "blue";
   cxt.fillRect(100,100,200,100);
   
</script>

image.png

4.状态的保存和还原

• cxt.save(); 保存
• cxt.restore(); 还原

<script type="text/javascript">
    var canvas = document.getElementById("con");
    //获取上下文
    var cxt = canvas.getContext("2d"); 
  cxt.fillRect(100,100,100,100);
  //保存状态
  cxt.save();
  
  //第二个状态
  cxt.translate(100,100);
  cxt.rotate(20 *Math.PI/180);
  cxt.fillStyle = "red";
  cxt.fillRect(100,100,200,100);
  
  //第三个状态
  //还原状态
  cxt.restore();
  cxt.fillStyle = "blue";
  cxt.fillRect(200,100,300,100);
</script>

image.png

• 一个综合例子

• 要想围绕一个点旋转要做到以下几点

  • 画布要平移 你要旋转的点
  • 绘制的图形 在平移以后是相对于 新的画布，所以必须要让自身的中点在 平移后的原点坐标上,既是 原点是自身 宽度和高度的一半

<script type="text/javascript">
    var canvas = document.getElementById("con");
    //获取上下文
    var cxt = canvas.getContext("2d");
    
    //绘制矩形

    // cxt.fillRect(200,200,200,100);
    var ang = 20;
    setInterval(function(){
        //清屏
        cxt.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
        //保存状态
        cxt.save();
        cxt.fillStyle = "red";
        //平移
        cxt.translate(300,200);
        //旋转
        cxt.rotate(ang * Math.PI/180);
        //要相对于平移后的坐标点 旋转
        //要移动自身坐标的宽度和高度的一半 才会到相对平移画布的远点
        cxt.fillRect(-100,-50,200,100);
        ang += 10;
        cxt.restore();
    },200);
    
    
    
    
</script>

Untitled.gif

5.将绘制的内容通过Base64转码 输出二进制数据

• canvas.toDataURL(type, encoderOptions);
  • type： 设置输出的类型，比如 image/png image/jpeg等
  • encoderOptions,0-1之间的数字，用于标识输出图片的质量，1表示无损压缩,对于jpg/webp格式才有作用

<script type="text/javascript">
    var canvas = document.getElementById("con");
    //获取上下文
    var cxt = canvas.getContext("2d");
    
    //绘制矩形
    cxt.fillStyle = "red";
    cxt.fillRect(200,200,200,100);
    
    //绘制文字
    cxt.font = "20px '微软雅黑'";
    cxt.strokeText("来来，你是谁",100,100);
    
    //转化为base64
    /*
        canvas.toDataURL(type, encoderOptions);
        type，设置输出的类型，比如 image/png image/jpeg等
        encoderOptions： 0-1之间的数字，用于标识输出图片的质量，1表示无损压缩，类型为： image/jpeg 或者image/webp才起作用。
        
    */
     var data = canvas.toDataURL("image/png",1);
     
     var img = document.getElementById("img_id");
     img.src = data;
    
    
</script>

image.png

6.合成属性globalCompositeOperation

• cxt.globalCompositeOperation = "source-over"

• source-over默认的样式属性 相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过

<script type="text/javascript">
    var canvas = document.getElementById("con");
    //获取上下文
    var cxt = canvas.getContext("2d");
    
    //绘制一个矩形
    cxt.fillStyle = "red";
    cxt.fillRect(200,200,200,100);
    
    //合成属性
    cxt.globalCompositeOperation = "source-over";
    
    //绘制一个圆形
    cxt.fillStyle = "#008000";
    cxt.arc(400,300,100,0,360*Math.PI/180);
    cxt.fill();
    
    
</script>

image.png

• source-in 只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明

image.png

• source-out 只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透明

image.png

• source-atop 后绘制图形不相交的部分透明,相交部分由后绘制图形的填充覆盖,全部浏览器通过

image.png

• destination-over 相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过
  

  image.png

• destination-in 只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明

image.png

• destination-out 只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明,全部浏览器通过

image.png

• destination-atop先绘制图形不相交的部分透明,相交部分由先绘制图形的填充覆盖
  image.png

• lighter 相交部分由根据先后图形填充来增加亮度,全部浏览器通过

image.png

• darker 相交部分由根据先后图形填充来降低亮度

image.png

• copy 只绘制后绘制图形,只有opera通过
  image.png

• xor 相交部分透明,全部浏览器通过

image.png

一个刮刮乐的例子

<script type="text/javascript">
    var canvas = document.getElementById("con");
    //获取上下文
    var cxt = canvas.getContext("2d");
    cxt.fillStyle = "#ccc";
    cxt.fillRect(0,0,320,160);
    //合成属性
    cxt.globalCompositeOperation = "destination-out";
    canvas.onmousedown = function(){
        
        canvas.onmousemove = function(e){
            //绘制圆形
            cxt.arc(e.offsetX,e.offsetY,20,0,2 * Math.PI);
            //渲染
            cxt.fill();
        }
        
        canvas.onmouseup = function(){
            canvas.onmousemove = null;
            canvas.onmouseup = null;
        }
    }
    
    
</script>

Untitled.gif