canvas里方法的应用总结(1)
1.canvas在低版本版本浏览器是不兼容的,可以提示用户
2.canvas使用原生js操作
画一条直线步骤流程一般为:
- 开启画布
<canvas id="cont" width="500px" height="500px">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
- 获取画布
var canvas=document.querySelector('#cont')
- 获取画布的上下文
var ctx=canvas.getContext()
- 开启一条路径
ctx.beginPath()
- 确定起始点
ctx.moveTo(100,100)
- 确定结束点
ctx.lineTo(400,400)
- 着色
ctx.stroke()
- 关闭路径
3.画矩形常用的方法有ctx.closePath()
- fillRect(x,y,width,height):x,y是代表这个矩形左上角的坐标,width,height代表这个矩形的宽高
-
fillStyle:填充矩形整个图像颜色
在使用这两个方法时,先填充颜色,后创建矩形,否则颜色填充不上去
fill():可以为整个画布里图像填充同一种颜色
- 获取画布的上下文