画布
canvas
属于html元素 h5新元素 需要结合js 用来绘制图形 在页面上放置一个canvas元素 就相当于放置了一块画布 可以绘制路径 矩形 圆形 字符 图像
属性:
width 默认值300px
height 默认值150px
注意点:canvas需要写闭合标签
一般不建议使用css设置它的宽高
方法:
fileRect(x,y,width,height)
绘制一个矩形图案(填充)
strokeRect()
绘制矩形边框
clearRect()
清除指定矩形区域,让清除部分完全透明
beginPath()
新建一条路径
然后通常会使用moveTo去设置你的起始位置
然后去绘制
closePath()
闭合路径
如果我们绘制的路径自己就是闭合的,那我们不需要调用这个方法
fill()
填充路径的内容区域 使用fill可以不用closePath()
stroke()
通过线条绘制图形轮廓
moveTo()
lineTo()
绘制直线
arc()
fillStyle()
控制色彩
颜色值 red #000999 rgb rgba
strokeStyle()
lineWidth()
拖拽
事件
dragstart 按下鼠标 并开始移动鼠标 会触发dragstart事件 我们通过ondragstart来调用方法
drag 当dragstart开始,会持续触发drag事件 类似mousemove事件
dragend 当拖放停止时(鼠标按键抬起时) 会触发
dragenter 拖动元素被拖动到放置元素上
dragover 拖动元素在放置范围内移动
dragleave 拖动元素从放置元素上移出