画布、拖放、浏览器存储、web存储学习

画布 canvas

属于html元素，需要结合js，用来绘制图形
在页面上放置一个canvas元素，就相当于放置了一块画布，可以绘制路径、矩形、圆形、字符、图像

属性

属性	描述
width	默认为300px
height	默认为150px

注意：canvas需要写闭合标签

<canvas></canvas>

一般不建议使用css设置它的宽高

方法

        var ctx=canvas.getContext("2d");
        ctx.fillStyle="green";
        ctx.fillRect(10,10,20,20);

方法	描述
fillRect()	绘制矩形图案(填充) 参数(x,y,width,height)
strokeRect()	绘制矩形边框
clearRect()	清除指定区域，让清除部分完全透明
beginPath()	新建一条路径(通常会使用moveTo去设置起始位置再去绘制)
closePath()	闭合路径(如果绘制的路径就是闭合的，那就不需要调用这个方法)
fill()	填充路径的内容区域
stroke()	通过线条绘制图形轮廓，需使用closePath()
moveTo()	将笔触移动到指定的坐标x以及y上
lineTo()	绘制直线
arc(x,y,r,startAngle.end,anticlockwise)	圆点坐标，半径,开始位置，结束位置，顺时针(默认)/逆时针
fillStyle()	控制色彩
strokeStyle()	设置或返回用于笔触的颜色、渐变或模式

canvas详细学习: 连接

示例

绘制图形

<script>
		fillRect(0,0,100,100)
        strokeRect(0,0,100,100);
        lineWidth 
        fillStyle
        strokeStyle
</script>

绘制圆

<script>
		beginPath();
        context.arc(0,0,50,0,Math.PI*2,true);
        fill();
        stroke();
        closePath();
</script>

绘制线段

<script>
     // 1.获取画布
        var canvas=document.querySelector('canvas'