HTML5 Canvas 开发绘图方法整理【八、Canvas 转换】

Canvas 转换方法：所有单位默认为 “px ” ;

转换：

Canvas 转换方法：所有单位默认为 “px ” ;

translate() 重新映射画布上的 (0,0) 位置　　（平移）
语法：translate(x ,y) x为正数向右移动 y为正数向下移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换</title>
</head>
<body>

<div style="text-align: center;">

    <canvas id="seventhC" width="300" height="300" style="border: 1px solid #fff123"></canvas>


    <div>
        <button id="btn">添加图形(位移)</button>

        <button id="btn2">添加图形(不位移)</button>
    </div>


</div>

<script>
    window.onload=function () {
        let cans = document.getElementById("seventhC");
        let ctx = cans.getContext("2d");

        ctx.fillStyle="#27A5FF";
        ctx.fillRect(20,20,70,70);

        ctx.translate(50,60);       //定义即将绘制矩形位置的偏移量 x轴向右50 y轴向右60
        ctx.strokeStyle="#2EE8F0";
        ctx.strokeRect(20,20,70,70);

        // (Canvas 所有定义的状态语句都必须写在 动作 之前才有效)


        //Canvas 每次绘制前 都是基于之前绘制后的效果，所以在每次点击的时候都会在上一次添加矩形的地方继续位移添加新的矩形
        btn.onclick=function () {
            ctx.translate(20,10);
            ctx.strokeStyle="#DE34B2";
            ctx.strokeRect(20,20,70,70);
        };

        //如果不希望继续添加新的矩形，可以用clearRect    这两个事件可以作为参考

        btn2.onclick=function () {
            ctx.clearRect(19,19,210,210);    //每次添加新矩形的时候清空掉上一次添加的
            ctx.translate(20,10);
            ctx.strokeStyle="#DE34B2";
            ctx.strokeRect(20,20,70,70);
        };

    }
</script>

</body>
</html>

效果图：
这里写图片描述

关于Canvas旋转、缩放功能我另外开了一篇：
http://blog.csdn.net/freedomvenly/article/details/79333028

然后先把关于转换的另外两种方法大概描述一下：

transform() 替换绘图的当前转换矩阵　　　　（转换矩阵）
语法：transform(a,b,c,d,e,f);
a 水平缩放绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图

setTransform() 将当前转换重置为单位矩阵。然后运行 transform()　　　（转换矩阵）
语法：setTransform(a,b,c,d,e,f)
a 水平旋转绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图

setTransform() 方法把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。

这两种目前用的不多，了解即可，感兴趣的小伙伴可以进这里了解更多：
http://www.w3school.com.cn/tags/canvas_transform.asp

http://www.w3school.com.cn/tags/canvas_settransform.asp

Canvas 转换方法的用法其实跟CSS3 的转换非常相似对CSS3熟悉的小伙伴上手会很快的！

HTML5 Canvas 开发 绘图方法整理 【八、Canvas 转换】

Canvas 转换方法： 所有单位默认为 “px ” ;

猜你喜欢

HTML5 Canvas 开发绘图方法整理【八、Canvas 转换】

Canvas 转换方法：所有单位默认为 “px ” ;