canvas画布绘制线段与变形绘制线段变形 1.平移 2.扩大(放大坐标) 3.旋转 4.保存和回滚注意旋转时是将坐

绘制线段

moveTo(x,y)
	x,y:线段的起点坐标
lineTo(x,y)
	x,y:线段的终点坐标
cx.stroke();
//fill():不能使用
lineWidth=number 线宽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var canvas=document.querySelector('canvas');
            var context=canvas.getContext('2d');
            // 绘制线段
            context.beginPath();
            context.lineWidth=5;
            context.strokeStyle = 'cyan';
            // 线段的起始位置
            context.moveTo(0,0);
            // 线段的结束位置 也是下一条线段的起点
            context.lineTo(100,100);
            context.lineTo(200,10);
            context.lineTo(300,100);
            // 结束路径 把线段起点和终点连在一起 没有这句代码线条首尾将不会连在一起
            context.closePath();
            context.stroke();
        }
    </script>
</head>
<body>
    <canvas width="400px" height="400px"></canvas>
</body>
</html>

绘制线段.png

变形

1.平移

translate(x,y)
x,y:将坐标原点平移单位

2.扩大(放大坐标)

scale(x,y)
	x:代表的是水平方向上的放大倍数
	y：代表的是垂直方向上的放大倍数（如果想要缩小，参数设置为0-1之间的值）

3.旋转

rotate(angle)
	angle:旋转角度，旋转的中心点就是坐标轴的原点
	默认按照顺时针进行旋转，想要进行逆时针旋转，角度设置为负数即可

4.保存和回滚

[save1,save2,save3]
save():将当前的绘画状态进行保存并存入状态栈
restore():该方法每次调用只会回滚到上一次save的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变形</title>
    <script>
        window.onload=function(){
            var canvas=document.querySelector('canvas');
            var context=canvas.getContext('2d');
            context.save(); //将当前绘制状态保存到状态栈
            context.fillStyle = 'pink';
            context.save();
            context.fillRect(0,0,100,100);
            // 将原点平移到现在的xy 平移的是原点
            context.translate(150,150);
            context.fillStyle = 'tomato';
            context.fillRect(0,0,100,100);
            // 扩大 将x轴宽度扩大多少倍
            context.scale(0.5,0.5);
            context.fillStyle = 'cyan';
            context.fillRect(200,0,100,100);
            // 旋转,是将xy坐标轴进行旋转，顺时针
            context.rotate(Math.PI/4);
            context.fillStyle = 'rgb(233, 37, 158)';
            context.fillRect(300,300,100,100);  
            context.restore();  //以保存位置为基准
            context.fillStyle = 'purple';
            context.fillRect(150,0,100,100);
            context.restore();
            context.fillStyle = 'green';
            context.fillRect(300,0,80,80);       
        }
    </script>
</head>
<body>
    <canvas width="500px" height="500px" style="background:#ccc"></canvas>
</body>
</html>

变形.png