zoukankan      html  css  js  c++  java
  • html5 canvas ( 线段的绘制 ) beginPath, moveTo, strokeStyle, stroke

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>canvas</title>
        <script type="text/javascript" src="../js/jQuery.js"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                outline: none;
                border: none;
            }
            #canvas{
                margin: auto auto;
                width: 7rem;
                margin: .25rem 0 0 1.5rem;
                border: 1px solid black;
            }
        </style>
    </head>
    <body> 
        <canvas id="canvas" width="1000" height="600"></canvas>
    </body>
    </html>
    <script type="text/javascript">
        /**
         * rem 布局初始化
         */
        $('html').css('font-size', $(window).width()/10);
        /**
         * 获取 canvas 画布
         * 获取 canvas 绘图上下文环境
         */
        var canvas = $('#canvas')[0];
        var context = canvas.getContext('2d');
        
        /**
         * canvas 线条绘制的 api ( 三条折现为例 )
         */
        context.lineWidth = 10; //线条的粗细
        
        context.beginPath(); //开始一段全新的路径( 清空之前的所有路径点 )
        context.moveTo(100, 100); //起点
        context.lineTo(200, 200); //下一个点
        context.lineTo(200, 300); //下一个点
        context.strokeStyle = 'red'; //线条的颜色 
        context.stroke(); //画线
        
        context.beginPath(); //开始一段全新的路径( 清空之前的所有路径点 )
        context.moveTo(150, 100); //起点
        context.lineTo(250, 200); //下一个点
        context.lineTo(250, 300); //下一个点
        context.strokeStyle = 'blue'; //线条的颜色 
        context.stroke(); //画线
        
        context.beginPath(); //开始一段全新的路径( 清空之前的所有路径点 )
        context.moveTo(200, 100); //起点
        context.lineTo(300, 200); //下一个点
        context.lineTo(300, 300); //下一个点
        context.strokeStyle = 'yellow'; //线条的颜色 
        context.stroke(); //画线
    </script>
  • 相关阅读:
    梯度下降
    02CSS
    逻辑推理题
    TensorFlow安装
    Python线程学习
    tensorflow中张量_常量_变量_占位符
    01HTML
    HDOJ 1078 FatMouse and Cheese
    HDOJ 2830 Matrix Swapping II
    HDOJ 2191 悼念512汶川大地震遇难同胞——珍惜现在,感恩生活
  • 原文地址:https://www.cnblogs.com/lovling/p/6617940.html
Copyright © 2011-2022 走看看