因为在Photoshop里抠了十几分钟都抠不出一个完美的对角线,
在快要放弃思考的情况下突然想到,我手抠不出来,让电脑生成一个总可以把……

于是想到了Canvas
折腾了几分钟就把两条对角线给弄出来了

<canvas id="canvasDemo" width="400" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    var a = document.getElementById("canvasDemo");
    var b = a.getContext("2d");

    b.beginPath();             //告诉浏览器给老娘准备画画
    b.lineWidth = "5";         //设定线条宽度是5px
    b.strokeStylt = "#535353"; //设定线条颜色
    b.moveTo(0,0);             //从左上角开始下笔
    b.lineTo(1000,1000);       //一直画到右下角停笔
    b.stroke();                //画出来!

    b.beginPath();
    b.lineWidth = "5";
    b.strokeStylt = "#535353";
    b.moveTo(0,400);
    b.lineTo(400,0);
    b.stroke();
</script>

最后得到

你看这个对角线是不是很完美
而且这个还是图片喔,可以右键另存为的那种

还能往上面加字,做法是在后面加上

b.font = "30px Noto";                  //字的大小和字型
b.fillText("白泠富貴食飯公司", 130, 230); //在哪里写字,写什么

标签: none