zoukankan      html  css  js  c++  java
  • HTML5之Canvas绘图——Canvas画布调整之移动、缩放、旋转

    有些人有些不解,为什么Canvas的坐标是从左上角开始的,而且向下是Y的正方向,向右是X的正方向?其实我也很不理解~~

    为什么就不能给我们更多的自定义功能呢?下面我改写了一段Canvas画布调整的代码,包含了Canvas画布的移动、缩放和旋转等相关功能

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
        body{margin:20px auto; padding:0; width:1000px }
        canvas{border:dashed 2px #ccc}
        span{font-size:16px; cursor:pointer}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function drawRect(co){
            var can = $$('can');
            cans = can.getContext('2d');
            cans.strokeStyle = co;
            cans.lineWidth = 3;
            cans.strokeRect(600,50,80,40);
        }
        function drawCircle(co){
            cans.beginPath();
            cans.arc(30,30,30,0,Math.PI*2,1);
            cans.closePath();
            cans.strokeStyle = co;
            cans.lineWidth = 3;
            cans.stroke();
        }
        function mv_click(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.translate(40,40);
            drawRect('black');
        }
        function zoom_click(){
            var can = $$('can');
            var cans = can.getContext('2d');
            drawCircle('red');
            cans.scale(0.5,1.5);
            drawCircle('green');
        }
        function rotate_click(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.rotate(Math.PI*2/360*45);
            drawRect('green');
            cans.rotate(-Math.PI/4);
            drawRect('black');
        }
    </script>
    <body onload="drawRect('red');">
        <canvas id="can" width="1000px" height="800px"></canvas>
        <span onclick="mv_click();"><mark>移动</mark></span>
        <span onclick="zoom_click();"><mark>缩放</mark></span>
        <span onclick="rotate_click();"><mark>旋转</mark></span>
    </body>
    </html>

    注意:调整了画布后,以后的操作就按照调整后的,千万注意坐标哦

    移动功能:

    缩放功能:

    旋转功能:

  • 相关阅读:
    Android推送服务——百度云推送
    关于HierarchyViewer的使用
    Android开发者的演示工具——asm.jar
    重装huson遇到的一些错误及解决
    对比语法错误、语义错误以及运行时错误
    对比常量存储与堆栈
    php下载文件夹目录下的文件
    B/S(WEB)系统中使用Activex插件调用扫描仪实现连续扫描并上传图像(IE文件扫描并自动上传
    上传文件夹
    如何在Web页面里使用高拍仪扫描上传图像
  • 原文地址:https://www.cnblogs.com/picaso/p/2789670.html
Copyright © 2011-2022 走看看