canvas day1

1、var canvas=document.querySelector("#canvas")

canvas.width=600;

canvas.height=600;

canvas.style.border='1px solid red' //通过canvaas对象的属性来设置canvas绘画盒子的宽高

2、var pen=canvas.getContext('2d') //获取画笔

3、pen.moveTo(100,100) //轨迹起点，以canvas的左上角为参考点，与canvas的父盒子无关

4、pen.lineTo(200,200) //轨迹终点，若无起点时，则以上一轨迹的终点为起点

5、pen.closePath() //绘制闭合图形时，不用写最后一条轨迹，直接从终点连线到起点

6、pen.strokeStyle="red"

pen.strokeStyle="rgb(130,200,100)"

pen.strokeStyle="rgba(120,150,60,0.3)"

pen.strokeStyle="#ccc"

//轨迹的颜色，不写默认黑色

7、pen.lineWidth=20; //轨迹的宽度，自宽度中线向两侧渲染

8、pen.stroke(); //绘制轨迹

9、pen.beginPath() //开始一个新轨迹

10、pen.arc(x,y,r,起始角度，结束角度，逆顺时针）

var deg1=Math.PI/180

pen.arc(400,100,50,0*deg1,360*deg1,true)

//x,y为圆心，r为半径，角度填弧度制（Math.PI) ，逆顺时针填布尔值（true/false)

11、pen.font="30px Verdana,Geneva,san-serif" //文字样式

12、pen.fillText(文字内容,x,y) //x,y为起点

13、pen.fillRect(x,y,w,h) //x,y为起点，w,h为宽高

14、pen.clearRect(x,y,w,h) //x,y为起点，w,h为宽高

15、canvas.width=canvas.width //清屏