zoukankan      html  css  js  c++  java
  • 一段画对角线的canvas代码,之前没有写过canvas代码,现在记录下来

    <canvas id="other"   style="320px;height:320px;"></canvas>
    

      

           var otherCanvas=document.getElementById('other');
                //获取真实width和height 设置到canvas的width和height
                var height=otherCanvas.offsetHeight,width=otherCanvas.offsetWidth;
                otherCanvas.width=width;
                otherCanvas.height =height;
                var context=otherCanvas.getContext("2d");
                context.lineWidth="1";//设置线的宽
                context.strokeStyle="#E8E8E8";//颜色
                context.beginPath();//开始划线
                context.moveTo(width,0);//设置起点(x,y)
                context.lineTo(width/2+16,height/2);//画线(x,y)
                context.lineTo(width,height);//画线(x,y)
                context.stroke();//生成线条
                context.font = ' 14px sans-serif';//字体
                context.fillText("*其他",16,(height/2)+8);//写入字符

    最后生成如下效果

  • 相关阅读:
    Split Temporary Variable
    Introduce Explaining Variable
    Replace Temp with Query
    Extract Method
    自测代码的价值
    代码的坏味道
    Divergent Change & Shotgun Surgery
    Large Class
    Long Method
    Duplicated Code
  • 原文地址:https://www.cnblogs.com/dannyxie/p/5522913.html
Copyright © 2011-2022 走看看