canvas图形变换_html-js-css

概述平移 translate(x,y) 注意平移的是坐标原点，而不是线条本身 <!DOCTYPE html> <html lang="en"> <head

平移

translate(x,y) 注意平移的是坐标原点，而不是线条本身

<!DOCTYPE HTML><HTML lang="en"head>    Meta charset="UTF-8"Title>canvas</style>        .canvas{border:1px solID pink;}    bodycanvas class="canvas" ID wIDth="600" height="400">您的浏览器不支持canvascanvas>    script>        var canvas=document.getElementByID("canvas);         ctxcanvas.getContext(2d);//上下文，绘图环境        ctx.translate(0,100);        ctx.moveto();        ctx.lineto();        ctx.stroke();        HTML>

        ctx.moveto();        ctx.translate(>

);                ctx.lineto(>

);        ctx.stroke();        ctx.translate();        ctx.beginPath();        ctx.moveto();                ctx.stroke();        >

beginPath() 会清空之前的路径，但是不会清空被平移的坐标原点

旋转 rotate(reg)

        ctx.strokeStyle'orange;        ctx.linewidth10;        ctx.moveto();                ctx.stroke();            ctx.rotate(Math.PI/4);        ctx.beginPath();        ctx.moveto();                ctx.stroke();        >

同理，旋转的是坐标原点，而不是线条

缩放 scale(x,y)

;        ctx.translate(300200);                ctx.stroke();        ctx.scale(15);        ctx.fillRect(-);        >

ctx.save() 保存当前环境

ctx.restore() 复原上一次保存的环境（包括线条粗细和颜色设置也会受到影响）

;        ctx.save();保存了最初还没变换的原点（描边颜色为橙色）        ctx.linewidth);        ctx.restore();坐标原点恢复到初始值500600400);                ctx.stroke();        >

这两个建议成对出现

时钟表盘的原理演示：

上下文，绘图环境        画圆        ctx.translate();        ctx.arc(502*Math.PI,1)">true);        ctx.stroke();        画刻度            for( i;i<12++){            ctx.rotate(Math.PI6);            ctx.moveto(40);            ctx.lineto();        }                ctx.stroke();        >