zoukankan      html  css  js  c++  java
  • canvas第一天(画一个大三角)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            canvas{
                background: blue;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
    <canvas id="canvas" width="900" height="500"></canvas>
    <script>
    //获得画板
    var canvas=document.getElementById("canvas");
    //获得绘画环境
    var cv=canvas.getContext('2d');
    //开启路径(相当于大喊一声我要开始画了)
    cv.beginPath();
    //移动笔触到开始位置
    cv.moveTo(200,50);
    //指定要画到哪里去
    cv.lineTo(200,450);
    //把线条画出来
    cv.stroke();
    cv.lineTo(500,450);
    cv.stroke();
    // 闭合路径
    cv.closePath();
    // 指定填充颜色
    cv.fillStyle='yellow';
    //填充路径
    cv.fill();
    </script>
    </body>

    运行结果如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            canvas{
                background: blue;
            }
        </style>
    
    
        <title>Document</title>
    </head>
    <body>
    <canvas id="canvas" width="900" height="500"></canvas>
    <script>
    //获得画板
    var canvas=document.getElementById("canvas");
    //获得绘画环境
    var cv=canvas.getContext('2d');
    //开启路径(相当于大喊一声我要开始画了)
    cv.beginPath();
    //移动笔触到开始位置
    cv.moveTo(200,50);
    //指定要画到哪里去
    cv.lineTo(200,450);
    //定义划线的粗细
    cv.lineWidth='10';
    //定义划线颜色
    cv.strokeStyle='white';
    //把线条画出来
    cv.stroke();
    cv.lineTo(500,450);
    cv.stroke();
    // cv.lineTo(200,50);
    // cv.stroke();
    // 关闭路径(将形状闭合将最终笔触的位置和开始点的笔触连接起来形成一个闭合的图形)
    cv.closePath();
    cv.stroke();
    </script>
    </body>
    </html>

    运行结果如下:

    别废话,拿你代码给我看。
  • 相关阅读:
    poj3277 City Horizon
    60.左值右值以及类型判断
    59.C++与正则表达式
    57.C++处理转义字符
    56.lambda表达式与绑定以及伪函数和绑定
    55.函数模板指针匹配(模板自动匹配*多的)
    54.函数模板默认参数
    53.伪函数与函数绑定器
    52.模板的重载
    51.模板与引用
  • 原文地址:https://www.cnblogs.com/lvxueyang/p/13707484.html
Copyright © 2011-2022 走看看