zoukankan      html  css  js  c++  java
  • H5 canvas 直线和三角形

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>canvas</title>
    </head>
    <body>
        <canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas>
    
    <script>
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            canvas.width = 1024;
            canvas.height = 768;
            var cxt = canvas.getContext("2d");
            cxt.moveTo(100,100);
            cxt.lineTo(300,300);
            cxt.lineTo(100,300);
            cxt.lineTo(100,100);
    
            cxt.fillStyle = "rgb(2,100,30)";
            cxt.fill();
    
            cxt.lineWidth = 1;
            cxt.strokeStyle = "red";
            cxt.stroke();
            cxt.closePath();
            cxt.moveTo(100,400)
            cxt.lineTo(400,400)
            cxt.lineTo(300,400)
            cxt.strokeStyle = "green";
            cxt.stroke();
        }
    </script>
    </body>
    </html>
    View Code
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>canvas</title>
    </head>
    <body>
        <canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas>
    
    <script>
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            canvas.width = 1024;
            canvas.height = 768;
            var cxt = canvas.getContext("2d");
            cxt.moveTo(100,100);
            cxt.lineTo(300,300);
            cxt.lineTo(100,300);
            cxt.lineTo(100,100);
    
            cxt.fillStyle = "rgb(2,100,30)";
            cxt.fill();
    
            cxt.lineWidth = 1;
            cxt.strokeStyle = "red";
            cxt.stroke();
            cxt.closePath();
            cxt.moveTo(100,400)
            cxt.lineTo(400,400)
            cxt.lineTo(300,400)
            cxt.strokeStyle = "green";
            cxt.stroke();
        }
    </script>
    </body>
    </html>

  • 相关阅读:
    GridView动态创建TemplateField的回发问题
    ASP.NET页面生命周期
    php图片叠加
    php文件下载
    mysql 常用操作命令
    转载:图解SQL的Join
    利用iframe来做无刷新上传
    php抽象和接口的区别
    php 循环打开目录读取文件
    mysql存储引擎的对比(一)
  • 原文地址:https://www.cnblogs.com/arealy/p/7736992.html
Copyright © 2011-2022 走看看