Canvas 碎碎念

html5新增的绘制图形的标签  默认样式行内块元素 画布大小默认300 * 300

canvas标签不能在css样式里面设置 会拉伸整个画布

要写在标签的属性上 内联 或者 js canvas.width = 500

 

画布 笔

 

js操作

 

获取canvas DOM对象

var canvs = document.querySelector('canvas')

 

获得canvas的绘制图形的上下文环境

var context = canvas.getContext("2d")

context.fillRect(0,0,300，300)

 

画线条

定义距离

找到起始位置   

context.moveTo(100,100)  抬起笔找到落笔点  可以做断开的一个点

划线

context.lineTo(200,200) 

context.lineTo(300,300)

操作路径    填充fill 闭合空间 起始点连接终点 产生的闭合空间   描边stroke  

context,store()

 

 

画矩形

①方案

路径

context.rect(0,0,100,150)

进行填充 描边

context.store()

②方案

直接绘制填充

context.fillRect(0,0,100,150)

 

 

画圆

参数1，2圆心坐标 

参数3：半径

参数4，5 ：起始弧度  终止弧度

参数6：是否逆时针

 

context.arc(250,250,200,0,(180/360)*Math.PI*2,true)

context.stroke

 

 

 

-------------------整理于yingxiang 20190218