canvas初体验

Youon Pak
Coding

因为在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); //在哪里写字，写什么