canvas学习（一）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言： 最近看到手机上 在线签名 是用canvas来做的，但是我自己的canvas不是很好，所以，就看着网上的视频（B站上找了学习视频）来开始学习一下。下面这几片文章就是来记录我学习canvas的经历和收货。

1.宽高

//canvas可以设置id. 宽高 我又加了一个背景色，可以看得更清楚。
  <canvas id="canvas" width="600" height="400" style="background-color:orange ;"></canvas>
  

2.属性 画矩形

fillRect() //填充绘制 参数：x坐标，y坐标，宽度，高度

strokRect()线条绘制 参数：x坐标，y坐标，宽度，高度

fillStyle="red" 填充绘制的样式颜色

let c1=document.getElementId('canvas');
let ctx=c1.getContext('2d');
ctx.fillRect(100,100,50,60)
ctx.fillStyle="orange"

ctx.strokeRect(200,200，30,30)

//
效果展示：

注意：当strokeRect 和fillRect混合使用的时候，我们需要使用beginPath 和closePath 来进行落点的开始和结束

    let c2=document.getElementById('secondCanvas');
    let ctx=c2.getContext('2d');
    ctx.beginPath();
    // 路线绘制
    ctx.strokeRect(100,100,200,200);
    ctx.closePath();
    // fillRect  填充绘制
    ctx.beginPath();
    ctx.fillRect(150,150,100,100)
    ctx.closePath();

2、画圆： 画圆我们需要一个新的属性： arc(圆心x坐标，圆心y坐标，半径，开始的角度，结束的角度，是否是顺时针)

<canvas id="canvas" width="500" height="500"></canvas>

let c3=document.getElementById('canvas');
let ctx=c3.getContext('2d');
//画圆
ctx.arc(100,100,50,0,Math.PI*2,false)
ctx.fillStyle="red";
ctx.fill();

ctx.arc(200,200,100,0,Math.PI,false);
ctx.fillStyle="orange";
ctx.fill();

//在这里要注意一个问题，在同一个页面中画圆使用不同的方法画圆时，需要加入beginPath,closePath这两个方法，不然，会导致bug出现。

今天的canvas入门学习先到这里，下一次做一个小demo