zoukankan      html  css  js  c++  java
  • Canvas rotate- 旋转

    Canvas rotate- 旋转

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>rotate</title>
    </head>
    
    <body>
        <canvas id='myCanvas' width='800' height='600'>
            your browser does not support canvas
        </canvas>
        <script type="text/javascript">
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');
        ctx.beginPath();
        ctx.strokeStyle = '#000000';
        ctx.strokeRect(200, 50, 100, 50);
        ctx.rotate(0.25 * Math.PI);
        ctx.beginPath();
        ctx.strokeStyle = '#ff0000';
        ctx.strokeRect(200, 50, 100, 50);
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>rotate</title>
    </head>
    
    <body>
        <canvas id='myCanvas' width='800' height='600'>
            your browser does not support canvas
        </canvas>
        <script type="text/javascript">
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');
        ctx.beginPath();
        ctx.strokeStyle = '#000000';
        ctx.strokeRect(200, 50, 100, 50);
        ctx.translate(250,75);
        ctx.rotate(0.25 * Math.PI);
        ctx.translate(-250,-75);
        ctx.beginPath();
        ctx.strokeStyle = '#ff0000';
        ctx.strokeRect(200, 50, 100, 50);
        ctx.arc(250,75,2,0,2*Math.PI,true);
        ctx.stroke();
        </script>
    </body>
    
    </html>
  • 相关阅读:
    Java 在线/离线 文档
    Java集合框架全解
    【LeetCode】204.计数质数
    深入SpringMvc
    SpringMvc基础
    SSM整合
    Spring注解
    SpringAop编程
    2路插入排序
    Matplotlib绘图库简要介绍
  • 原文地址:https://www.cnblogs.com/stono/p/4670409.html
Copyright © 2011-2022 走看看