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>
  • 相关阅读:
    小程序注册
    Webpack
    npm总结1
    js事件
    js高级程序2
    js高级程序
    索引
    将数据渲染到页面的方法
    前后端分离后,通讯问题 springboot + vue
    axios post 请求后端参数为null解决方案
  • 原文地址:https://www.cnblogs.com/lovling/p/6617940.html
Copyright © 2011-2022 走看看