canvas笔记二

1. 旋转

css样式

<style>
        canvas{
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>

html

<canvas id="can" width="500px" height="300px"></canvas>

js

 var canvas = document.getElementById("can");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.translate(100,100);//坐标系平移，开一改变顶点
        ctx.rotate(Math.PI / 3);//指旋转的角度 , 默认是以画布的原点即左上角
        ctx.moveTo(0,0);
        ctx.lineTo(100,100);
        ctx.stroke();
   

默认的旋转是以画布的的原点，即画布默认以左上角为原点的， 如果想变成以线条的定点为旋转原点，可以使用 ctx.translate(100,100)

scale(2,1)可以是化的图形缩放

 ctx.scale(2,1);// 缩放
 ctx.strokeRect(100, 100, 100, 100);

2. 如果第一个图形想旋转，第二个图形不想选择， 则可以使用save()、restore()等。 在canvas中默认旋转是全局的

  //保存最基础的数据，然后在还原
        ctx.save();//坐标系的平移数据、 缩放数据、旋转数据
        ctx.translate(100, 100);
        ctx.rotate(Math.PI / 4);
        ctx.strokeRect(0, 0, 100, 50);

        ctx.beginPath();
        ctx.restore();//与save() 一起使用
        ctx.fillRect(200, 0, 100, 50);

canvas画的图形可以填充颜色、或者背景图片

1填充背景颜色

  //矩形内容的填充
        ctx.fillStyle ="blue"; // 填充不同的颜色
        ctx.fillRect(100, 100, 200, 100);

填充图片

        // 填充图片
        var img = new Image();
        img.src = "./good.png";
        img.onload = function(){
        ctx.beginPath();
        ctx.translate(100, 100);
     var bg = ctx.createPattern(img,"no-repeat");
        //纹理的填充，是以坐标系原点进行填充的
        ctx.fillStyle = bg;
        ctx.fillRect(100, 100, 200, 100);
        }

也可以填充渐变颜色

1.线性渐变

  //  渐变填充
    // 线性渐变的 起始点是 坐标轴原点  可以用 ctx.translate(100, 100); 改变
        ctx.beginPath();                     // 调整渐变的方向
        var bg = ctx.createLinearGradient(0, 0, 200, 0);
        bg.addColorStop(0,"blue");//类似与关键帧
        bg.addColorStop(1, "pink");
        ctx.fillStyle = bg;
        ctx.fillRect(0, 0, 200, 100);

辐射渐变

  // 辐射渐变
        ctx.beginPath();                 // 中心坐标 半径  外圈的坐标  半径
        var bg = ctx.createRadialGradient(100, 100, 10, 100, 100, 100);
        bg.addColorStop(0, "pink");
        bg.addColorStop(0.5, "red");
        bg.addColorStop(1, "yellow");
        ctx.fillStyle = bg;
        ctx.fillRect(0, 0, 200, 200);