【原创】 【HTML】【学习】 Canvas学习笔记【中】_html/css_WEB-ITnose

    5、保存和恢复Canvas状态

        context.save();

        context.restore();

     save可以将当前的状态暂时得存入堆中，而restore则可以读取堆中存储的状态

     他们都不需要任何参数

     当开始绘制一张图时，如果之前已经有图形，记得使用save保存当前的状态

立即学习“前端免费学习笔记（深入）”；

    6.1、坐标空间

    在canvas中，坐标空间默认为画布左上角为（0，0）为原点，x轴水平向右为正向，角度为0

    y轴垂直向下为正向角度为π/2，

    绘制图形时，可以使用translate（）方法移动坐标空间

    trantslate()接受2个参数，代表原点偏移的量，如trantslate(100,100)

    将绘图的基准点分别向右及向下偏移100px

    移动坐标空间在批量绘制图形时很有用处

        <canvas id="cyclePrint" style="border:1px solid" height="300px"         width="800px">你的浏览器不支持canvas</canvas>        <script>        function drawH(hoop,fillStyle,height){	        hoop.fillStyle = fillStyle;	        hoop.fillRect(0,0,50,height);        }        function draw(){	    var oHoop = document.getElementById("cyclePrint").getContext("2d");		    for(var i = 0; i < 15; i++)	    {		oHoop.save();		oHoop.translate(50*i,280-20*i);				drawH(oHoop,"rgb("+(10*i)+","+(255-10*i)+",255",20+20*i);		oHoop.restore();	    }        }        window.onload = function (){	    draw();        }        </script>

    以上代码运行后在画布上绘制了若干个大小不等，颜色渐变的矩形：

    代码解释：

    这里建立了2个函数，draw()函数使用循环连续绘制图形

    同时将绘图需要的参数传递给另一个函数drawH(),由drawH()函数完成矩形的绘制

     在draw()函数的循环体中，每一次调用drawH函数，都要进行一次save()，restore()和一次

    teantslate()重定位

    6.2 旋转坐标空间

    context.rotate(angle);

    rotate只有一个参数，即旋转角度angle，旋转角度一顺时针方向为正方向，以弧度为单位，从

    x轴右方向开始旋转

    修改6.1的代码，可以得到以下图形：

    7.缩放图形

    scale()方法用于增减Canvans上下文对象中的像素数目，从而实现图形或位图的大小或缩放

    context.scale(x,y)

    x为横轴缩放因子，y为纵轴缩放因子，使用大于1的数作为缩放因子，将放大图形

    使用0～1之间的数作为缩放因子，将缩小图片

        在这个图形中，使用scale(0.95,0.95)对原图形进行了60次缩放，具体代码如下：

<canvas id="scalePrint2" style="border:1px solid" width="800px" height="600px">你的浏览器不支持canvas特效！</canvas><button id="scale2" type="button" onClick="showScalePrint()">点我绘制图形</button><script>function showScalePrint(){	var oScalePrint = document.getElementById("scalePrint2").getContext("2d");	oScalePrint.translate(400,300);	for(var i = 0; i < 60; i++)	{		oScalePrint.save();			oScalePrint.scale(0.95,0.95);		oScalePrint.fillStyle = "rgb("+(255-i*10)+","+(0+i*10)+",255)";		oScalePrint.beginPath();		oScalePrint.arc(0,0,250,0,Math.PI*2,true);		oScalePrint.closePath();		oScalePrint.fill();		}}</script>

    代码解释：

    上面的代码中，使用了一个按钮，设定其触发事件为运行函数showScalePrint()

360 AI助手

360公司推出的AI聊天机器人聚合平台，集合了国内15家顶尖的AI大模型。

140

查看详情

    在函数showScalePrint()中，定位原点在(400,300)

    设定oScalePrint的填充样式，进行60次循环，完成了上面的图形

    7、矩阵变换

    使用transform方法用于直接对变形矩阵作修改，即进行矩阵变换

    context.transform(m11,m12,m21,m22,dx,dy)

    原理是用变换矩阵和context原来的坐标(x,y)相乘，得到新的坐标

    transform的变换矩阵表示为：

    m11    m21    dx

    m12    m22    dy

    0     0      1

    transform方法使用这个矩阵和原坐标的矩阵相乘

    x

    y

    l

    关于矩阵的乘法，遵循如下算法：

    1：当矩阵A的列数等于矩阵B的行数时，A与B可以相乘。

    2：矩阵C的行数等于矩阵A的行数，C的列数等于B的列数。

    3：乘积C的第i行第j列的元素等于矩阵A的第i行的元素与矩阵B的第j列对应元素乘积之和。

    根据以上算法，得到新的坐标矩阵为

    (m11)x+(m21)y+dx

    (m12)x+(m22)y+dy

        1

    即：

    xNew = (m11)x+(m21)y+dx

    yNew = (m12)x+(m22)y+dy

    使用transform方法，只要设定特定的参数，就可以取代translate、scale、rotate等方法

    第一眼看到矩阵变换，真是晕头转向，但只要研究足够深入，很快就会喜欢这种方法

    用一条语句完成图形的移动、缩放和旋转！