zoukankan html css js c++ java

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>

查看全文

相关阅读:
Windows多线程编程入门
 多字节字符与宽字符
 Linux静态库与动态库详解
 Linux下清理内存和Cache方法
 数据库设计范式
 mybatis面试问题
 Gson使用
 Linux 定时任务crontab使用
 Java-GC机制
 java内存模型

原文地址：https://www.cnblogs.com/stono/p/4670409.html