zoukankan      html  css  js  c++  java
  • canvas(一) 基本线条绘制

    var dom = document.getElementById('canvasItem'),
        ctx = dom.getContext('2d');
    
        //坐标位置默认基于 浏览器窗口(0,0),此时居中,基于 当前坐标系
        //x轴 向右,y轴向下
        ctx.beginPath();
        ctx.moveTo(100,350); //只是将坐标移到某点
        ctx.lineTo(500,350); //将两个点之间连接起来
        ctx.lineTo(500,200);
        ctx.lineTo(600,350); //基于状态绘制图像 此时,状态设置
    
        ctx.moveTo(600,450);
        ctx.lineTo(600,500);
        ctx.lineWidth=10;
        ctx.strokeStyle='red';
    
        ctx.stroke();
    
        /*绘制不同 属性的 线条,使用beginPath 重新开启一条全新的路径*/
        ctx.beginPath();
        //ctx.moveTo(100,520);
        ctx.lineTo(100,520); //使用lineTo 相当于 moveTo,当使用了beginPath
        ctx.lineTo(600,520);
        ctx.lineWidth=3;
        ctx.strokeStyle='blue';
        ctx.stroke();
    
    
        ctx.beginPath();
    
        ctx.moveTo(100,560);
        ctx.lineTo(600,560);
        ctx.lineWidth=30;
        ctx.strokeStyle='yellow';
    
        ctx.stroke(); //绘制
  • 相关阅读:
    【脑图】iOS的Crash分类和捕获
    Ruby03
    Ruby02
    Ruby01
    如何快速把一个十进制数转换为二进制?
    iOS
    互联网协议基本知识
    XCBB
    iOS
    iOS
  • 原文地址:https://www.cnblogs.com/xianrongbin/p/6523501.html
Copyright © 2011-2022 走看看