画布,托拽,浏览器储存

本文介绍了HTML5中的canvas元素用于在网页上绘制图形的基本概念和方法,包括绘制路径、矩形、圆形等,以及色彩控制。接着讨论了拖拽事件的生命周期,如dragstart、dragend等,以及数据交互过程。最后,概述了浏览器的存储技术,如sessionStorage和localStorage,以及WebSocket的实时通信优势。
摘要由CSDN通过智能技术生成

画布
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 拖动元素从放置元素上移出

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值