zoukankan      html  css  js  c++  java
  • canvas 动态飞速旋转的矩形

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>变形</title>
        <script type="text/javascript">
            window.onload = function () {
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                //1.旋转
                context.translate(200, 200);  //平移到正方形中心
                var deg = 360;
                setInterval(function () {
                    rotate(deg * 180 / Math.PI);
                    deg/4;
                }, 100)
    
                var rotate = function (deg) {
                    context.rotate(deg);
                    context.fillRect(-50, -50, 100, 100);
                    context.clearRect(-50, -50, 100, 100);
                    context.beginPath();
                    context.moveTo(-100, -100);
                    context.lineTo(100, 100);
                    context.moveTo(-100, 100);
                    context.lineTo(100, -100);
                    context.closePath();
                    context.strokeStyle = "#00ff00";
                    context.stroke();
                }
            }
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000">
            您的浏览器暂不支持画布!
        </canvas>
    </body>
    </html>
  • 相关阅读:
    苹果常识
    Xcode相关路径
    iOS10 Xcode8问题汇总
    摇一摇
    手机端在线预览文件
    生成纯色色块
    django--没有整理,笔记
    httprunnermanager环境搭建 -----转
    httprunner---->最最基础小白笔记
    Oracle 多表联合删除?--转
  • 原文地址:https://www.cnblogs.com/xiaoyumi666/p/6014445.html
Copyright © 2011-2022 走看看