zoukankan      html  css  js  c++  java
  • Canvas---绘制三条不同颜色和宽度的平行线

    绘制三条不同颜色和宽度的平行线

    画布

    <canvas width="600" height="400"></canvas>

    画布加边框显示出来

        <style>
            canvas {
                border: 1px solid #ccc;
            }
        </style>

    获取canvas, 准备工具盒context

        var myCanvas = document.querySelector('canvas');
        var ctx = myCanvas.getContext('2d');

    画平行线,设置颜色ctx.strokeStyle, 设置线的宽度lineWidth

        /*画平行线*/
        ctx.beginPath();/*Kai*/
        /*蓝色  10px*/
        ctx.moveTo(100,100);
        ctx.lineTo(300,100);
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 10;
        /*描边*/
        ctx.stroke();
        /*红色 20px*/
        ctx.moveTo(100,200);
        ctx.lineTo(300,200);
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 20;
        /*描边*/
        ctx.stroke();
    
    
        /*绿色 30px*/
        ctx.moveTo(100,300);
        ctx.lineTo(300,300);
        ctx.strokeStyle = 'green';
        ctx.lineWidth = 30;
        /*描边*/
        ctx.stroke();

    对象的属性设置后,后面会覆盖前面,要注意

  • 相关阅读:
    Epplus
    常用的android弹出对话框
    android 获取当前位置
    android:inputType参数类型说明
    PageRank算法
    XGBoost算法
    FP-growth算法
    卡方分布与卡方检验
    Apriori算法
    关联规则
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/12294997.html
Copyright © 2011-2022 走看看